<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery  API Browser </title>
<link rel="stylesheet" href="screen.css" media="screen,projector">
<link rel="stylesheet" href="print.css" media="print">
<script type="text/javascript" src="lib/browser.lib.min.js"></script><script type="text/javascript" src="browser.js"></script>
</head>
<body>
<h1>
<a href="http://jquery.com"><img src="images/logo_jquery3.png" alt="jQuery Logo"></a>
</h1>
<div id="header">
			
		jQuery UI API <span> - <a href="jquery-api-browser.zip">Download</a></span>
</div>
<div id="content">
<div id="nav">
<ul class="tabs-nav">
<li>
<a href="#navCat">Category</a>
</li>
<li>
<a href="#navAlpha">Alphabetical</a>
</li>
</ul>
<div class="navsub" id="navCat">
<h3>Categorized</h3>
<div class="treecontrol">
<a href="#">Collapse All</a><a href="#">Expand All</a><a href="#">Toggle All</a>
</div>
<ul>
<li>
<span>UI/Draggables</span>
<ul>
<li>
<a href="#link-draggable-options">draggable(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-draggableDestroy-">draggableDestroy()</a>
</li>
<li>
<a href="#link-draggableDisable-">draggableDisable()</a>
</li>
<li>
<a href="#link-draggableEnable-">draggableEnable()</a>
</li>
<li>
<a href="#link-draggableInstance-">draggableInstance()</a>
</li>
</ul>
</li>
<li>
<span>UI/Droppables</span>
<ul>
<li>
<a href="#link-droppable-options">droppable(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-droppableDestroy-">droppableDestroy()</a>
</li>
<li>
<a href="#link-droppableDisable-">droppableDisable()</a>
</li>
<li>
<a href="#link-droppableEnable-">droppableEnable()</a>
</li>
<li>
<a href="#link-droppableInstance-">droppableInstance()</a>
</li>
</ul>
</li>
<li>
<span>UI/Sortables</span>
<ul>
<li>
<a href="#link-sortable-options">sortable(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-sortableDestroy-">sortableDestroy()</a>
</li>
</ul>
</li>
<li>
<span>UI/Selectables</span>
<ul>
<li>
<a href="#link-selectable-options">selectable(<span class="arg-type tooltip">options</span>)</a>
</li>
</ul>
</li>
<li>
<span>UI/Resizables</span>
<ul>
<li>
<a href="#link-resizable-options">resizable(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-resizableDestroy-">resizableDestroy()</a>
</li>
<li>
<a href="#link-resizableDisable-">resizableDisable()</a>
</li>
<li>
<a href="#link-resizableEnable-">resizableEnable()</a>
</li>
<li>
<a href="#link-resizableInstance-">resizableInstance()</a>
</li>
</ul>
</li>
<li>
<span>UI/Accordion</span>
<ul>
<li>
<a href="#link-accordion-options">accordion(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-activate-index">activate(<span class="arg-type tooltip">index</span>)</a>
</li>
</ul>
</li>
<li>
<span>UI/Datepicker</span>
<ul>
<li>
<a href="#link-datepicker-options">datepicker(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-dialogDatepicker-dateTextonSelectsettingspos">dialogDatepicker(<span class="arg-type tooltip">dateText</span>, <span class="arg-type tooltip">onSelect</span>, <span class="arg-type tooltip">settings</span>, <span class="arg-type tooltip">pos</span>)</a>
</li>
<li>
<a href="#link-disableFor-target">disableFor(<span class="arg-type tooltip">target</span>)</a>
</li>
<li>
<a href="#link-enableFor-target">enableFor(<span class="arg-type tooltip">target</span>)</a>
</li>
<li>
<a href="#link-formatDate-formatdatedayNamesShortdayNamesmonthNamesShortmonthNames">formatDate(<span class="arg-type tooltip">format</span>, <span class="arg-type tooltip">date</span>, <span class="arg-type tooltip">dayNamesShort</span>, <span class="arg-type tooltip">dayNames</span>, <span class="arg-type tooltip">monthNamesShort</span>, <span class="arg-type tooltip">monthNames</span>)</a>
</li>
<li>
<a href="#link-getDateFor-control">getDateFor(<span class="arg-type tooltip">control</span>)</a>
</li>
<li>
<a href="#link-hideDatepicker-speed">hideDatepicker(<span class="arg-type tooltip">speed</span>)</a>
</li>
<li>
<a href="#link-isDisabled-input">isDisabled(<span class="arg-type tooltip">input</span>)</a>
</li>
<li>
<a href="#link-iso8601Week-date">iso8601Week(<span class="arg-type tooltip">date</span>)</a>
</li>
<li>
<a href="#link-parseDate-formatvalueshortYearCutoffdayNamesShortdayNamesmonthNamesShortmonthNames">parseDate(<span class="arg-type tooltip">format</span>, <span class="arg-type tooltip">value</span>, <span class="arg-type tooltip">shortYearCutoff</span>, <span class="arg-type tooltip">dayNamesShort</span>, <span class="arg-type tooltip">dayNames</span>, <span class="arg-type tooltip">monthNamesShort</span>, <span class="arg-type tooltip">monthNames</span>)</a>
</li>
<li>
<a href="#link-reconfigureFor-controlsettings">reconfigureFor(<span class="arg-type tooltip">control</span>, <span class="arg-type tooltip">settings</span>)</a>
</li>
<li>
<a href="#link-setDateFor-controldateendDate">setDateFor(<span class="arg-type tooltip">control</span>, <span class="arg-type tooltip">date</span>, <span class="arg-type tooltip">endDate</span>)</a>
</li>
<li>
<a href="#link-setDefaults-settings">setDefaults(<span class="arg-type tooltip">settings</span>)</a>
</li>
<li>
<a href="#link-showFor-target">showFor(<span class="arg-type tooltip">target</span>)</a>
</li>
</ul>
</li>
<li>
<span>UI/Dialog</span>
<ul>
<li>
<a href="#link-dialog-options">dialog(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-dialogClose-">dialogClose()</a>
</li>
<li>
<a href="#link-dialogOpen-">dialogOpen()</a>
</li>
</ul>
</li>
<li>
<span>UI/Slider</span>
<ul>
<li>
<a href="#link-slider-options">slider(<span class="arg-type tooltip">options</span>)</a>
</li>
</ul>
</li>
<li>
<span>Plugins/Tablesorter</span>
<ul>
<li>
<a href="#link-tablesorter-options">tablesorter(<span class="arg-type tooltip">options</span>)</a>
</li>
</ul>
</li>
<li>
<span>UI/Tabs</span>
<ul>
<li>
<a href="#link-tabs-initialoptions">tabs(<span class="arg-type tooltip">initial</span>, <span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-tabsAdd-urltitleposition">tabsAdd(<span class="arg-type tooltip">url</span>, <span class="arg-type tooltip">title</span>, <span class="arg-type tooltip">position</span>)</a>
</li>
<li>
<a href="#link-tabsClick-position">tabsClick(<span class="arg-type tooltip">position</span>)</a>
</li>
<li>
<a href="#link-tabsDisable-position">tabsDisable(<span class="arg-type tooltip">position</span>)</a>
</li>
<li>
<a href="#link-tabsEnable-position">tabsEnable(<span class="arg-type tooltip">position</span>)</a>
</li>
<li>
<a href="#link-tabsHref-positionurl">tabsHref(<span class="arg-type tooltip">position</span>, <span class="arg-type tooltip">url</span>)</a>
</li>
<li>
<a href="#link-tabsLoad-positionurl">tabsLoad(<span class="arg-type tooltip">position</span>, <span class="arg-type tooltip">url</span>)</a>
</li>
<li>
<a href="#link-tabsRemove-position">tabsRemove(<span class="arg-type tooltip">position</span>)</a>
</li>
<li>
<a href="#link-tabsSelected-">tabsSelected()</a>
</li>
</ul>
</li>
<li>
<span>UI/TabsExtensions</span>
<ul>
<li>
<a href="#link-tabsRotate-milliseconds">tabsRotate(<span class="arg-type tooltip">milliseconds</span>)</a>
</li>
</ul>
</li>
<li>
<span>UI/Shadow</span>
<ul>
<li>
<a href="#link-shadow-options">shadow(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-shadowDestroy-">shadowDestroy()</a>
</li>
<li>
<a href="#link-shadowDisable-">shadowDisable()</a>
</li>
<li>
<a href="#link-shadowEnable-">shadowEnable()</a>
</li>
</ul>
</li>
<li>
<span>UI/Magnifier</span>
<ul>
<li>
<a href="#link-magnifier-options">magnifier(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-magnifierDestroy-">magnifierDestroy()</a>
</li>
<li>
<a href="#link-magnifierDisable-">magnifierDisable()</a>
</li>
<li>
<a href="#link-magnifierEnable-">magnifierEnable()</a>
</li>
<li>
<a href="#link-magnifierInstance-">magnifierInstance()</a>
</li>
<li>
<a href="#link-magnifierReset-">magnifierReset()</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="navsub" id="navAlpha">
<h3>Alphabetic</h3>
<ul>
<li>
<a href="#link-accordion-options">accordion(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-activate-index">activate(<span class="arg-type tooltip">index</span>)</a>
</li>
<li>
<a href="#link-datepicker-options">datepicker(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-dialog-options">dialog(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-dialogClose-">dialogClose()</a>
</li>
<li>
<a href="#link-dialogDatepicker-dateTextonSelectsettingspos">dialogDatepicker(<span class="arg-type tooltip">dateText</span>, <span class="arg-type tooltip">onSelect</span>, <span class="arg-type tooltip">settings</span>, <span class="arg-type tooltip">pos</span>)</a>
</li>
<li>
<a href="#link-dialogOpen-">dialogOpen()</a>
</li>
<li>
<a href="#link-disableFor-target">disableFor(<span class="arg-type tooltip">target</span>)</a>
</li>
<li>
<a href="#link-draggable-options">draggable(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-draggableDestroy-">draggableDestroy()</a>
</li>
<li>
<a href="#link-draggableDisable-">draggableDisable()</a>
</li>
<li>
<a href="#link-draggableEnable-">draggableEnable()</a>
</li>
<li>
<a href="#link-draggableInstance-">draggableInstance()</a>
</li>
<li>
<a href="#link-droppable-options">droppable(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-droppableDestroy-">droppableDestroy()</a>
</li>
<li>
<a href="#link-droppableDisable-">droppableDisable()</a>
</li>
<li>
<a href="#link-droppableEnable-">droppableEnable()</a>
</li>
<li>
<a href="#link-droppableInstance-">droppableInstance()</a>
</li>
<li>
<a href="#link-enableFor-target">enableFor(<span class="arg-type tooltip">target</span>)</a>
</li>
<li>
<a href="#link-formatDate-formatdatedayNamesShortdayNamesmonthNamesShortmonthNames">formatDate(<span class="arg-type tooltip">format</span>, <span class="arg-type tooltip">date</span>, <span class="arg-type tooltip">dayNamesShort</span>, <span class="arg-type tooltip">dayNames</span>, <span class="arg-type tooltip">monthNamesShort</span>, <span class="arg-type tooltip">monthNames</span>)</a>
</li>
<li>
<a href="#link-getDateFor-control">getDateFor(<span class="arg-type tooltip">control</span>)</a>
</li>
<li>
<a href="#link-hideDatepicker-speed">hideDatepicker(<span class="arg-type tooltip">speed</span>)</a>
</li>
<li>
<a href="#link-isDisabled-input">isDisabled(<span class="arg-type tooltip">input</span>)</a>
</li>
<li>
<a href="#link-iso8601Week-date">iso8601Week(<span class="arg-type tooltip">date</span>)</a>
</li>
<li>
<a href="#link-magnifier-options">magnifier(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-magnifierDestroy-">magnifierDestroy()</a>
</li>
<li>
<a href="#link-magnifierDisable-">magnifierDisable()</a>
</li>
<li>
<a href="#link-magnifierEnable-">magnifierEnable()</a>
</li>
<li>
<a href="#link-magnifierInstance-">magnifierInstance()</a>
</li>
<li>
<a href="#link-magnifierReset-">magnifierReset()</a>
</li>
<li>
<a href="#link-parseDate-formatvalueshortYearCutoffdayNamesShortdayNamesmonthNamesShortmonthNames">parseDate(<span class="arg-type tooltip">format</span>, <span class="arg-type tooltip">value</span>, <span class="arg-type tooltip">shortYearCutoff</span>, <span class="arg-type tooltip">dayNamesShort</span>, <span class="arg-type tooltip">dayNames</span>, <span class="arg-type tooltip">monthNamesShort</span>, <span class="arg-type tooltip">monthNames</span>)</a>
</li>
<li>
<a href="#link-reconfigureFor-controlsettings">reconfigureFor(<span class="arg-type tooltip">control</span>, <span class="arg-type tooltip">settings</span>)</a>
</li>
<li>
<a href="#link-resizable-options">resizable(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-resizableDestroy-">resizableDestroy()</a>
</li>
<li>
<a href="#link-resizableDisable-">resizableDisable()</a>
</li>
<li>
<a href="#link-resizableEnable-">resizableEnable()</a>
</li>
<li>
<a href="#link-resizableInstance-">resizableInstance()</a>
</li>
<li>
<a href="#link-selectable-options">selectable(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-setDateFor-controldateendDate">setDateFor(<span class="arg-type tooltip">control</span>, <span class="arg-type tooltip">date</span>, <span class="arg-type tooltip">endDate</span>)</a>
</li>
<li>
<a href="#link-setDefaults-settings">setDefaults(<span class="arg-type tooltip">settings</span>)</a>
</li>
<li>
<a href="#link-shadow-options">shadow(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-shadowDestroy-">shadowDestroy()</a>
</li>
<li>
<a href="#link-shadowDisable-">shadowDisable()</a>
</li>
<li>
<a href="#link-shadowEnable-">shadowEnable()</a>
</li>
<li>
<a href="#link-showFor-target">showFor(<span class="arg-type tooltip">target</span>)</a>
</li>
<li>
<a href="#link-slider-options">slider(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-sortable-options">sortable(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-sortableDestroy-">sortableDestroy()</a>
</li>
<li>
<a href="#link-tablesorter-options">tablesorter(<span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-tabs-initialoptions">tabs(<span class="arg-type tooltip">initial</span>, <span class="arg-type tooltip">options</span>)</a>
</li>
<li>
<a href="#link-tabsAdd-urltitleposition">tabsAdd(<span class="arg-type tooltip">url</span>, <span class="arg-type tooltip">title</span>, <span class="arg-type tooltip">position</span>)</a>
</li>
<li>
<a href="#link-tabsClick-position">tabsClick(<span class="arg-type tooltip">position</span>)</a>
</li>
<li>
<a href="#link-tabsDisable-position">tabsDisable(<span class="arg-type tooltip">position</span>)</a>
</li>
<li>
<a href="#link-tabsEnable-position">tabsEnable(<span class="arg-type tooltip">position</span>)</a>
</li>
<li>
<a href="#link-tabsHref-positionurl">tabsHref(<span class="arg-type tooltip">position</span>, <span class="arg-type tooltip">url</span>)</a>
</li>
<li>
<a href="#link-tabsLoad-positionurl">tabsLoad(<span class="arg-type tooltip">position</span>, <span class="arg-type tooltip">url</span>)</a>
</li>
<li>
<a href="#link-tabsRemove-position">tabsRemove(<span class="arg-type tooltip">position</span>)</a>
</li>
<li>
<a href="#link-tabsRotate-milliseconds">tabsRotate(<span class="arg-type tooltip">milliseconds</span>)</a>
</li>
<li>
<a href="#link-tabsSelected-">tabsSelected()</a>
</li>
</ul>
</div>
</div>
<ul id="docs">
<li id="link-accordion-options">
<span class="fn"><a class="name" href="#link-accordion-options">accordion</a>( <span class="arg-type tooltip" title="">Options</span> <span class="arg-name tooltip" title="A set of key/value pairs that configure the accordion. All options are optional.">options</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Make the selected elements Accordion widgets.<br> Semantic requirements:<br>
<br>If the structure of your container is flat with unique
tags for header and content elements, eg. a definition list
(dl &gt; dt + dd), you don't have to specify any options at
all.<br>
<br>If your structure uses the same elements for header and
content or uses some kind of nested structure, you have to
specify the header elements, eg. via class, see the second example.<br>
<br>Use activate(Number) to change the active content programmatically.<br>
<br>A change event is triggered everytime the accordion changes. Apart from
the event object, all arguments are jQuery objects.
Arguments: event, newHeader, oldHeader, newContent, oldContent</div>
<h3>Options</h3>
<ul class="options">
<li>
<span>header (<span class="arg-type tooltip" title="">String, Element, jQuery</span>), default: first child's tagname</span>
<div>Selector for the header element. </div>
</li>
<li>
<span>active (<span class="arg-type tooltip" title="">String, Element, jQuery, Boolean, Number</span>), default: first child</span>
<div>Selector for the active element. Set to false to display none at start.</div>
</li>
<li>
<span>selectedClass (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: 'selected'</span>
<div>Class for active header elements.</div>
</li>
<li>
<span>alwaysOpen (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: true</span>
<div>Whether there must be one content element open. </div>
</li>
<li>
<span>animated (<span class="arg-type tooltip" title="">Boolean, String</span>), default: 'slide'</span>
<div>Choose your favorite animation, or disable them (set to false). In addition to the default, "bounceslide" and "easeslide" are supported (both require the easing plugin).</div>
</li>
<li>
<span>event (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: "click"</span>
<div>The event on which to trigger the accordion.</div>
</li>
<li>
<span>navigation (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: false</span>
<div>If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving.</div>
</li>
<li>
<span>autoheight (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: false</span>
<div>If set, the highest content part is used as height reference for all other parts. Provides more consistent animations.</div>
</li>
<li>
<span>clearStyle (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: false</span>
<div>If set, clears height and overflow styles after finishing animations. This enables accordions to work with dynamic content. Won't work together with autoheight.</div>
</li>
</ul>
<div class="example">
<h3>Example:</h3>
<p>A simple jQuery UI Accordion.</p>
<pre>
<code class="javascript">$("#example").accordion();</code>
</pre>
<h4>HTML:</h4>
<pre>
<code class="html">&lt;link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)"&gt;

&lt;script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/dimensions/jquery.dimensions.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://dev.jquery.com/view/trunk/ui/current/ui.accordion.js"&gt;&lt;/script&gt;

	&lt;ul id="example" class="ui-accordion-container" style="width: 200px;"&gt;

		&lt;li&gt;
			&lt;div class="ui-accordion-left"&gt;&lt;/div&gt;
			&lt;a href='#' class="ui-accordion-link"&gt;
				Test 1
				&lt;div class="ui-accordion-right"&gt;&lt;/div&gt;

			&lt;/a&gt;
			&lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			&lt;/div&gt;

		&lt;/li&gt;
		&lt;li&gt;
			&lt;div class="ui-accordion-left"&gt;&lt;/div&gt;

			&lt;a href='#' class="ui-accordion-link"&gt;Test 2&lt;div class="ui-accordion-right"&gt;&lt;/div&gt;&lt;/a&gt;
			&lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			&lt;/div&gt;
		&lt;/li&gt;

		&lt;li&gt;
			&lt;div class="ui-accordion-left"&gt;&lt;/div&gt;

			&lt;a href='#' class="ui-accordion-link"&gt;Test 3&lt;div class="ui-accordion-right"&gt;&lt;/div&gt;&lt;/a&gt;

			&lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			&lt;/div&gt;
		&lt;/li&gt;
	&lt;/ul&gt;</code>
</pre>
</div>
</div>
</li>
<li id="link-activate-index">
<span class="fn"><a class="name" href="#link-activate-index">activate</a>( <span class="arg-type tooltip" title="">String, Element, jQuery, Boolean, Number</span> <span class="arg-name tooltip" title="An Integer specifying the zero-based index of the content to be activated or an expression specifying the element, or an element/jQuery object, or a boolean false to close all.">index</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Activate a content part of the Accordion programmatically.<br>The index can be a zero-indexed number to match the position of the header to close or a string expression matching an element. Pass -1 to close all (only possible with alwaysOpen:false).</div>
<div class="example">
<h3>Example:</h3>
<p>Activate the second content of the Accordion contained in &lt;div id="accordion"&gt;.</p>
<pre>
<code class="javascript">$(".selector").activate(1)</code>
</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>Close all content parts of the accordion.</p>
<pre>
<code class="javascript">$(".selector").activate(false)</code>
</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>Activate the first element matching the given expression.</p>
<pre>
<code class="javascript">$(".selector").activate("a:first")</code>
</pre>
</div>
</div>
</li>
<li id="link-datepicker-options">
<span class="fn"><a class="name" href="#link-datepicker-options">datepicker</a>( <span class="arg-type tooltip" title="">Options</span> <span class="arg-name tooltip" title="A set of key/value pairs that configure the date picker. All options are optional.">options</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">The method that you use to create a new date picker. Customize with plenty of options.<br>Attach the date picker to an input or for an inline view attach the date picker to a div or span.</div>
<h3>Options</h3>
<ul class="options">
<li>
<span>clearText (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: 'Clear'</span>
<div>The text to display for the clear link. This attribute is one of the regionalisation attributes.</div>
</li>
<li>
<span>closeText (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: 'Close'</span>
<div>The text to display for the close link. This attribute is one of the regionalisation attributes.</div>
</li>
<li>
<span>closeAtTop (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: true</span>
<div>Position the Clear/Close links at the top (true) or bottom (false).</div>
</li>
<li>
<span>prevText (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: '&lt;Prev'</span>
<div>The text to display for the previous month link. This attribute is one of the regionalisation attributes.</div>
</li>
<li>
<span>nextText (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: 'Next&gt;'</span>
<div>The text to display for the next month link. This attribute is one of the regionalisation attributes.</div>
</li>
<li>
<span>hideIfNoPrevNext (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: false</span>
<div>Normally the previous and next links are disabled when not applicable (see ''minDate''/''maxDate''). You can hide them altogether by setting this attribute to true.</div>
</li>
<li>
<span>currentText (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: 'Today'</span>
<div>The text to display for the current day link. This attribute is one of the regionalisation attributes.</div>
</li>
<li>
<span>monthNames (<span class="arg-type tooltip" title="">String[]</span>), default: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']</span>
<div>The list of full month names, as used in the month header on each datepicker and as requested via the ''dateFormat'' setting. This attribute is one of the regionalisation attributes.</div>
</li>
<li>
<span>monthNamesShort (<span class="arg-type tooltip" title="">String[]</span>), default: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']</span>
<div>The list of abbreviated month names, for use as requested via the ''dateFormat'' setting. This attribute is one of the regionalisation attributes.&lt;br/&gt;'''Since v3.1.'''</div>
</li>
<li>
<span>changeMonth (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: true</span>
<div>Allows you to change the month by selecting from a drop-down list. You can disable this feature by setting the attribute to false.</div>
</li>
<li>
<span>yearRange (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: '-10:+10'</span>
<div>Control the range of years displayed in the year drop-down: either relative to current year (-nn:+nn) or absolute (nnnn:nnnn).</div>
</li>
<li>
<span>changeYear (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: true</span>
<div>Allows you to change the year by selecting from a drop-down list. You can disable this feature by setting the attribute to false.</div>
</li>
<li>
<span>weekHeader (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: 'Wk'</span>
<div>The column header for the week of the year (see ''showWeeks''). This attribute is one of the regionalisation attributes.&lt;br/&gt;'''Since v3.1.'''</div>
</li>
<li>
<span>dayNames (<span class="arg-type tooltip" title="">String[]</span>), default: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']</span>
<div>The list of long day names, starting from Sunday, for use as requested via the ''dateFormat'' setting. They also appear as popup hints when hovering over the corresponding column headings. This attribute is one of the regionalisation attributes.&lt;br/&gt;'''In v3.0''', this setting held the column headings.</div>
</li>
<li>
<span>dayNamesShort (<span class="arg-type tooltip" title="">String[]</span>), default: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']</span>
<div>The list of abbreviated day names, starting from Sunday, for use as requested via the ''dateFormat'' setting. This attribute is one of the regionalisation attributes.&lt;br/&gt;'''Since v3.1.'''</div>
</li>
<li>
<span>dayNamesMin (<span class="arg-type tooltip" title="">String[]</span>), default: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']</span>
<div>The list of minimised day names, starting from Sunday, for use as column headers within the datepicker. This attribute is one of the regionalisation attributes.&lt;br/&gt;'''Since v3.1.'''</div>
</li>
<li>
<span>firstDay (<span class="arg-type tooltip" title="A valid numeric.">Number</span>), default: 0</span>
<div>Set the first day of the week: Sunday is 0, Monday is 1, ... This attribute is one of the regionalisation attributes.</div>
</li>
<li>
<span>changeFirstDay (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: true</span>
<div>Allows you to click on the day names to have the week start on that day. You can disable this feature by setting the attribute to false.</div>
</li>
<li>
<span>showOtherMonths (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: false</span>
<div>Display dates in other months (non-selectable) at the start or end of the current month.</div>
</li>
<li>
<span>showWeeks (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: false</span>
<div>Display the week of the year alongside each month. The column header is specified by the ''weekHeader'' setting. The week number is calculated based on the first date shown in each row in the datepicker, and so may not apply to all days in that row. The ''calculateWeek'' setting allows you to change the week of the year calculation from the default ISO 8601 implementation.&lt;br/&gt;'''Since v3.1.'''</div>
</li>
<li>
<span>calculateWeek (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: $.datepicker.iso8601Week</span>
<div>Perform the week of the year calculation. This function accepts a Date as a parameter and returns the number of the corresponding week of the year. The default implementation uses the ISO 8601 definition of a week: weeks start on a Monday and the first week of the year contains January 4. This means that up to three days from the previous year may be included in the first week of the  current year, and that up to three days from the current year may be included in the last week of the previous year.&lt;br/&gt;'''Since v3.1.'''</div>
</li>
<li>
<span>numberOfMonths (<span class="arg-type tooltip" title="">Number, Number[2]</span>), default: 1</span>
<div>Set how many months to show at once. The value can be a straight integer, or can be a two-element array to define the number of rows and columns to display.</div>
</li>
<li>
<span>stepMonths (<span class="arg-type tooltip" title="A valid numeric.">Number</span>), default: 1</span>
<div>Set how many months to move when clicking the Previous/Next links.</div>
</li>
<li>
<span>rangeSelect (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: false</span>
<div>Set to true to allow the selection of a date range on the one date picker, or false to just select a single date. For a date range, the first click sets the start date and a second click sets the end date.</div>
</li>
<li>
<span>rangeSeparator (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: ' - '</span>
<div>Set the text to use to separate the two dates in a date range via the ''onSelect'' function.</div>
</li>
<li>
<span>defaultDate (<span class="arg-type tooltip" title="">Date(yyyy, mm - 1, dd), Number</span>), default: null</span>
<div>Set the date to display on first opening if the field is blank. Specify either an actual date via a Date object, or relative to today with a number, or null for today.</div>
</li>
<li>
<span>minDate (<span class="arg-type tooltip" title="">Date(yyyy, mm - 1, dd)</span>), default: null</span>
<div>Set a minimum selectable date, or null for no limit.</div>
</li>
<li>
<span>maxDate (<span class="arg-type tooltip" title="">Date(yyyy, mm - 1, dd)</span>), default: null</span>
<div>Set a maximum selectable date, or null for no limit.</div>
</li>
<li>
<span>dateFormat (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: 'mm/dd/yy'</span>
<div>The format for parsed and displayed dates. This attribute is one of the regionalisation attributes.&lt;br/&gt;'''In v3.0''', the first three characters are 'D' (day), 'M' (month), and 'Y' (year) in the required order, and the fourth is the separator, e.g. ISO would be 'YMD-', default was 'MDY/'.&lt;br/&gt;'''From v3.1''', the format is combinations of the following:
* d - day of month (no leading zero)
* dd - day of month (two digits)
* m - month (no leading zero)
* mm - month (two digits)
* y - year (two digits)
* yy - year (four digits)
* D - name of day (short)
* DD - name of day (long)
* M - name of month (short)
* MM - name of month (long)
* '...' - literal text
* '' - single quote
* anything else - literal text</div>
</li>
<li>
<span>useShortYear (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: false</span>
<div>Set to true to display the year as two digits only, or false to show all four digits.&lt;br/&gt;'''Removed in v3.1.''' Use expanded ''dateFormat'' instead.</div>
</li>
<li>
<span>shortYearCutoff (<span class="arg-type tooltip" title="">String, Number</span>), default: '+10'</span>
<div>Set the cutoff year for determining the century for a date (used in conjunction with ''dateFormat'' 'y'). If a numeric value (0-99) is provided then this value is used directly. If a string value is provided then it is converted to a number and added to the current year. Once the cutoff year is calculated, any dates entered with a year value less than or equal to it are considered to be in the current century, while those greater than it are deemed to be in the previous century.</div>
</li>
<li>
<span>appendText (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: ''</span>
<div>The text to display after each date field, e.g. to show the required format.</div>
</li>
<li>
<span>speed (<span class="arg-type tooltip" title="">String, Number</span>), default: 'medium'</span>
<div>Control the speed at which the datepicker appears, it may be a time in milliseconds, a descriptive name ('slow', 'medium', 'fast'), or '' for immediately.</div>
</li>
<li>
<span>showOn (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: 'focus'</span>
<div>Have the datepicker appear automatically when the field receives focus ('focus'), appear only when a button is clicked ('button'), or appear when either event takes place ('both').</div>
</li>
<li>
<span>buttonText (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: '...'</span>
<div>The text to display on the trigger button. Use in conjunction with ''showOn'' equal to 'button' or 'both'.</div>
</li>
<li>
<span>buttonImage (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: ''</span>
<div>The URL for the popup button image. If set, button text becomes the ''alt'' value and is not directly displayed.</div>
</li>
<li>
<span>buttonImageOnly (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: false</span>
<div>Set to true to place an image after the field to use as the trigger without it appearing on a button.</div>
</li>
<li>
<span>beforeShow (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: null</span>
<div>Can be a function that takes an input field and current datepicker instance and returns a settings (anonymous) object to update the date picker with. It is called just before the datepicker is displayed.</div>
</li>
<li>
<span>beforeShowDay (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: null</span>
<div>The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable and [1] equal to a CSS class name(s) or '' for the default presentation. It is called for each day in the datepicker before is it displayed.</div>
</li>
<li>
<span>onSelect (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: null</span>
<div>Allows you to define your own event when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters.</div>
</li>
</ul>
<div class="example">
<h3>Example:</h3>
<p>A simple jQuery UI Datepicker.</p>
<pre>
<code class="javascript">$('#example').datepicker();
$('#exampleRange').datepicker({rangeSelect: true, firstDay: 1 });</code>
</pre>
<h4>HTML:</h4>
<pre>
<code class="html">&lt;link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.datepicker.css" type="text/css" media="screen" title="Flora (Default)"&gt;

&lt;script  src="http://dev.jquery.com/view/trunk/ui/current/datepicker/core/ui.datepicker.js"&gt;&lt;/script&gt;
&lt;input type="text" id="example" value="Click inside me to see a datepicker" style="width:300px;"/&gt;

&lt;input type="text" id="exampleRange" value="A range datepicker starting on Monday" style="width:300px;"/&gt;</code>
</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>Add a datepicker that appears on focus or a click on an icon.</p>
<pre>
<code class="javascript">$('.invokeBoth').datepicker({ showOn: 'both', buttonImageOnly: true, buttonImage: 'datepicker.gif', buttonText: 'datepicker' });</code>
</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>Add a datepicker that doesn't allow selection of days on weekends.</p>
<pre>
<code class="javascript">$('#noWeekends').datepicker({ beforeShowDay: $.datepicker.noWeekends });</code>
</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>Add a datepicker that defaults to 7 days in the future.</p>
<pre>
<code class="javascript">$('#openDatePlus7').datepicker({ defaultDate: +7 });</code>
</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>Add a datepicker in French. Requires loading of the French localization package.</p>
<pre>
<code class="javascript">$('#frenchdatepicker').datepicker( $.datepicker.regional['fr'] );</code>
</pre>
</div>
</div>
</li>
<li id="link-dialog-options">
<span class="fn"><a class="name" href="#link-dialog-options">dialog</a>( <span class="arg-type tooltip" title="">Options</span> <span class="arg-name tooltip" title="A set of key/value pairs that configure the dialog. All options are optional.">options</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Make the selected elements Dialog boxes.<br>
</div>
<h3>Options</h3>
<ul class="options">
<li>
<span>buttons (<span class="arg-type tooltip" title="A simple Javascript object..">Object</span>), default: </span>
<div>Specifies which buttons should be displayed on the dialog. The property key is the text of the button. The value is the callback function for when the button is clicked.</div>
</li>
<li>
<span>height (<span class="arg-type tooltip" title="A valid numeric.">Number</span>), default: </span>
<div>The height of the dialog, in pixels. Default value: 200.</div>
</li>
<li>
<span>position (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>Specifies where the dialog should be displayed. Possible values: 'center'. Default value: 'center'.</div>
</li>
<li>
<span>title (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>Specifies the title of the dialog. The title can also be specified by the title attribute on the dialog source element.</div>
</li>
<li>
<span>width (<span class="arg-type tooltip" title="A valid numeric.">Number</span>), default: </span>
<div>The width of the dialog, in pixels. Default value: 300.</div>
</li>
</ul>
<div class="example">
<h3>Example:</h3>
<p>A simple jQuery UI Modal Dialog.</p>
<pre>
<code class="javascript">$("#example").dialog();</code>
</pre>
<h4>HTML:</h4>
<pre>
<code class="html">&lt;link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)"&gt;

&lt;script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/dimensions/jquery.dimensions.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://dev.jquery.com/view/trunk/ui/current/ui.dialog.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://dev.jquery.com/view/trunk/ui/current/ui.resizable.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript" src="http://dev.jquery.com/view/trunk/ui/current/ui.mouse.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://dev.jquery.com/view/trunk/ui/current/ui.draggable.js"&gt;&lt;/script&gt;
&lt;div id="example" class="flora" title="This is my title"&gt;I'm in a dialog!&lt;/div&gt;</code>
</pre>
</div>
</div>
</li>
<li id="link-dialogClose-">
<span class="fn"><a class="name" href="#link-dialogClose-">dialogClose</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Closes the specified dialog boxes.<br>
</div>
</div>
</li>
<li id="link-dialogDatepicker-dateTextonSelectsettingspos">
<span class="fn"><a class="name" href="#link-dialogDatepicker-dateTextonSelectsettingspos">dialogDatepicker</a>( <span class="arg-type tooltip" title="A string of characters.">String</span> <span class="arg-name tooltip" title="The initial date for the date picker.">dateText</span>, <span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span> <span class="arg-name tooltip" title="A callback function when a date is selected. The function receives the date text and date picker instance as parameters.">onSelect</span>, <span class="arg-type tooltip" title="">Options</span> <span class="arg-name tooltip" title="The new settings for the date picker.">settings</span>, <span class="arg-type tooltip" title="">Number[2] or MouseEvent</span> <span class="arg-name tooltip" title="The position of the top/left of the dialog as [x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.">pos</span> ) returns <span class="type"><span class="tooltip" title="">Datepicker</span></span></span>
<div class="more">
<div class="desc">Open a datepicker in a "dialog" box.<br>
</div>
<div class="example">
<h3>Example:</h3>
<p>Open a datepicker in a "dialog" box.</p>
<pre>
<code class="javascript">$.datepicker.dialogDatepicker($('#invokeDialog').val(), setDateFromDialog, {prompt: 'Choose a date', speed: ''});</code>
</pre>
</div>
</div>
</li>
<li id="link-dialogOpen-">
<span class="fn"><a class="name" href="#link-dialogOpen-">dialogOpen</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Opens the specified dialog boxes.<br>
</div>
</div>
</li>
<li id="link-disableFor-target">
<span class="fn"><a class="name" href="#link-disableFor-target">disableFor</a>( <span class="arg-type tooltip" title="">Element,Selector,jQuery collection</span> <span class="arg-name tooltip" title="The input field to which the date picker is attached, or a selector for the input fields, or an existing jQuery collection.">target</span> ) returns <span class="type"><span class="tooltip" title="">Datepicker</span></span></span>
<div class="more">
<div class="desc">Disable an input field and its attached date picker.<br>
</div>
<div class="example">
<h3>Example:</h3>
<p>Disable the date picker for an input field.</p>
<pre>
<code class="javascript">$.datepicker.disableFor('#invokeFocus');</code>
</pre>
</div>
</div>
</li>
<li id="link-draggable-options">
<span class="fn"><a class="name" href="#link-draggable-options">draggable</a>( <span class="arg-type tooltip" title="">Options</span> <span class="arg-name tooltip" title="A set of key/value pairs that configure the draggable. All options are optional.">options</span> ) returns <span class="type"><span class="tooltip" title="">Dragset</span></span></span>
<div class="more">
<div class="desc">Creates new draggables on the nodeset supplied by the query.<br>This jQuery plugin makes DOM nodes draggable by mouse. You can additionally supply a great range of options to make them fit your needs.</div>
<h3>Options</h3>
<ul class="options">
<li>
<span>appendTo (<span class="arg-type tooltip" title="">Selector</span>), default: </span>
<div>The string should be a jQuery selector. The matched element will be used as the helper's container. If not specified, the helper is appended to the same container as the draggable.</div>
</li>
<li>
<span>axis (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>Constrains dragging to either the horizontal (x) or vertical (y) axis. Cannot be used with cursorAt. Possible values: 'x', 'y'.</div>
</li>
<li>
<span>containment (<span class="arg-type tooltip" title="">Element, Selector</span>), default: </span>
<div>Constrains dragging to within the bounds of the specified element - can be a DOM element, 'parent', 'document' or a jQuery selector.</div>
</li>
<li>
<span>cursor (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>The css cursor for the helper during the drag operation.</div>
</li>
<li>
<span>cursorAt (<span class="arg-type tooltip" title="">{top, left, bottom, right}</span>), default: </span>
<div>Moves the dragging element/helper so the cursor always appears to drag from the same position.</div>
</li>
<li>
<span>dragPrevention (<span class="arg-type tooltip" title="An Array of strings.">Array&lt;String&gt;</span>), default: </span>
<div>Prevents dragging if you start on elements of the specified type(s). Default: ['input', 'textarea', 'button', 'select', 'option'].</div>
</li>
<li>
<span>effect (<span class="arg-type tooltip" title="">[String, String]</span>), default: </span>
<div>The effects for the drag start and stop. Possible values [Start, Stop]: 'fade' (Start - fade in, Stop - fade out)</div>
</li>
<li>
<span>grid (<span class="arg-type tooltip" title="">[Integer x, Integer y]</span>), default: </span>
<div>Snaps the dragging element/helper to a grid, every x and y pixels. Cannot be used with cursorAt.</div>
</li>
<li>
<span>handle (<span class="arg-type tooltip" title="">Element, Selector</span>), default: </span>
<div>Restricts drag start click to the specified element. Default value: draggable element.</div>
</li>
<li>
<span>helper (<span class="arg-type tooltip" title="">Element function()</span>), default: </span>
<div>Allows for a helper element to be used for dragging display. The supplied function should return a valid DOM node to be used as a custom proxy helper.</div>
</li>
<li>
<span>helper (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>Allows for a helper element to be used for dragging display. The 'clone' option will produce the 'ghosting' effect. Possible values: 'original', 'clone', Function. Default value: 'original'.</div>
</li>
<li>
<span>opacity (<span class="arg-type tooltip" title="">Float</span>), default: </span>
<div>Opacity for element/helper while being dragged.</div>
</li>
<li>
<span>preventionDistance (<span class="arg-type tooltip" title="">Integer</span>), default: </span>
<div>Tolerance for when dragging should start. If specified, dragging will not start until after mouse is dragged beyond distance.</div>
</li>
<li>
<span>preventionTimeout (<span class="arg-type tooltip" title="">Integer</span>), default: </span>
<div>Time in milliseconds to define when the dragging should start. It helps preventing unwanted drags when clicking on an element. Default value: false</div>
</li>
<li>
<span>revert (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: </span>
<div>If true, the element will return to its start position when dragging stops.</div>
</li>
<li>
<span>scroll (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: </span>
<div>If true, container auto-scrolls while dragging. Default value: true.</div>
</li>
<li>
<span>scrollSensitivity (<span class="arg-type tooltip" title="">Integer</span>), default: </span>
<div>Default value: 20.</div>
</li>
<li>
<span>scrollSpeed (<span class="arg-type tooltip" title="">Integer</span>), default: </span>
<div>Default value: 20.</div>
</li>
<li>
<span>zIndex (<span class="arg-type tooltip" title="">Integer</span>), default: </span>
<div>z-index for element/helper while being dragged.</div>
</li>
<li>
<span>start (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>Function to call when dragging starts.</div>
</li>
<li>
<span>drag (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>Function to call when the mouse is moved during the dragging. ui.position.left and ui.position.top give the position.</div>
</li>
<li>
<span>stop (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>Function to call when dragging stops. ui.position.left and ui.position.top give the position.</div>
</li>
</ul>
<div class="example">
<h3>Example:</h3>
<p>Makes the div draggable.</p>
<pre>
<code class="javascript">$(".block").draggable();</code>
</pre>
<h4>HTML:</h4>
<pre>
<code class="html">&lt;script src="http://dev.jquery.com/view/trunk/ui/current/ui.mouse.js"&gt;&lt;/script&gt;

  &lt;script src="http://dev.jquery.com/view/trunk/ui/current/ui.draggable.js"&gt;&lt;/script&gt;
  &lt;script src="http://dev.jquery.com/view/trunk/ui/current/ui.draggable.ext.js"&gt;&lt;/script&gt;
&lt;div class="block"&gt;&lt;/div&gt;
</code>
</pre>
</div>
</div>
</li>
<li id="link-draggableDestroy-">
<span class="fn"><a class="name" href="#link-draggableDestroy-">draggableDestroy</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Destroys all draggable functionality in the current jQuery.<br>Destroys all draggable functionality in the current jQuery.</div>
</div>
</li>
<li id="link-draggableDisable-">
<span class="fn"><a class="name" href="#link-draggableDisable-">draggableDisable</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Disables draggables.<br>Temporarily disables draggables on the current jQuery. Can be re-enabled again later on.</div>
</div>
</li>
<li id="link-draggableEnable-">
<span class="fn"><a class="name" href="#link-draggableEnable-">draggableEnable</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Enables draggables.<br>Re-enables draggable functionality on the jQuery supplied that has been disabled before.</div>
</div>
</li>
<li id="link-draggableInstance-">
<span class="fn"><a class="name" href="#link-draggableInstance-">draggableInstance</a>(  ) returns <span class="type"><span class="tooltip" title="">Instance</span></span></span>
<div class="more">
<div class="desc">Returns the OO instance of the current draggable.<br>For the advanced, this function is very useful to modify internals of the draggables after initializing it. It returns a javascript function instance.</div>
</div>
</li>
<li id="link-droppable-options">
<span class="fn"><a class="name" href="#link-droppable-options">droppable</a>( <span class="arg-type tooltip" title="">Options</span> <span class="arg-name tooltip" title="A set of key/value pairs that configure the droppable. All options are optional.">options</span> ) returns <span class="type"><span class="tooltip" title="">Dropset</span></span></span>
<div class="more">
<div class="desc">Creates new droppables on the nodeset supplied by the query.<br>This jQuery plugin makes DOM nodes droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.</div>
<h3>Options</h3>
<ul class="options">
<li>
<span>accept (<span class="arg-type tooltip" title="">Boolean function(draggable)</span>), default: </span>
<div>This function is called for each draggable on the page, to provide a custom filter. Return true if draggable should be accepted.</div>
</li>
<li>
<span>accept (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>The string should be a jQuery selector. All draggables that match the selector will be accepted.</div>
</li>
<li>
<span>activeClass (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>The class that should be added to the droppable while an acceptable draggable is being dragged.</div>
</li>
<li>
<span>greedy (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: </span>
<div>If true, will prevent event propagation on nested droppables. Default value: false.</div>
</li>
<li>
<span>hoverClass (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>The class that should be added to the droppable while being hovered by an acceptable draggable.</div>
</li>
<li>
<span>tolerance (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>Specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values: 'fit', 'intersect', 'pointer', 'touch'. Default value: 'intersect'.</div>
</li>
<li>
<span>activate (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>This function is called any time an accepted draggable starts dragging.</div>
</li>
<li>
<span>deactivate (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>This function is called any time an accepted draggable stops dragging.</div>
</li>
<li>
<span>over (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>This function is called as an accepted draggable is dragged 'over' (within the tolerance of) this droppable.</div>
</li>
<li>
<span>out (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>This function is called when an accepted draggable is dragged out (within the tolerance of) this droppable.</div>
</li>
<li>
<span>drop (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>This function is called when an accepted draggable is dropped 'over' (within the tolerance of) this droppable.</div>
</li>
</ul>
<div class="example">
<h3>Example:</h3>
<p>Makes the div drag and droppable.</p>
<pre>
<code class="javascript">$(".block").draggable({helper: 'clone'});
$(".drop").droppable({
	accept: ".block",
	activeClass: 'droppable-active',
	hoverClass: 'droppable-hover',
	drop: function(ev, ui) {
		$(this).append("&lt;br&gt;Dropped!");
	}
});</code>
</pre>
<h4>HTML:</h4>
<pre>
<code class="html">&lt;script src="http://dev.jquery.com/view/trunk/plugins/ui/ui.mouse.js"&gt;&lt;/script&gt;

&lt;script src="http://dev.jquery.com/view/trunk/plugins/ui/ui.draggable.js"&gt;&lt;/script&gt;
&lt;script src="http://dev.jquery.com/view/trunk/plugins/ui/ui.draggable.ext.js"&gt;&lt;/script&gt;
&lt;script src="http://dev.jquery.com/view/trunk/plugins/ui/ui.droppable.js"&gt;&lt;/script&gt;
&lt;script src="http://dev.jquery.com/view/trunk/plugins/ui/ui.droppable.ext.js"&gt;&lt;/script&gt;
&lt;div class="block"&gt;drag me!&lt;/div&gt;

&lt;div class="drop"&gt;drop on me!&lt;/div&gt;
</code>
</pre>
</div>
</div>
</li>
<li id="link-droppableDestroy-">
<span class="fn"><a class="name" href="#link-droppableDestroy-">droppableDestroy</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Destroys all droppable functionality in the current jQuery.<br>Destroys all droppable functionality in the current jQuery.</div>
</div>
</li>
<li id="link-droppableDisable-">
<span class="fn"><a class="name" href="#link-droppableDisable-">droppableDisable</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Disables droppables.<br>Temporarily disables droppables on the current jQuery. Can be re-enabled again later on.</div>
</div>
</li>
<li id="link-droppableEnable-">
<span class="fn"><a class="name" href="#link-droppableEnable-">droppableEnable</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Enables droppables.<br>Re-enables droppable functionality on the jQuery supplied that has been disabled before.</div>
</div>
</li>
<li id="link-droppableInstance-">
<span class="fn"><a class="name" href="#link-droppableInstance-">droppableInstance</a>(  ) returns <span class="type"><span class="tooltip" title="">Instance</span></span></span>
<div class="more">
<div class="desc">Returns the OO instance of the current droppable.<br>For the advanced, this function is very useful to modify internals of the droppables after initializing it. It returns a javascript function instance.</div>
</div>
</li>
<li id="link-enableFor-target">
<span class="fn"><a class="name" href="#link-enableFor-target">enableFor</a>( <span class="arg-type tooltip" title="">Element,Selector,jQuery collection</span> <span class="arg-name tooltip" title="The input field to which the date picker is attached, or a selector for the input fields, or an existing jQuery collection.">target</span> ) returns <span class="type"><span class="tooltip" title="">Datepicker</span></span></span>
<div class="more">
<div class="desc">Enable an input field and its attached date picker.<br>
</div>
<div class="example">
<h3>Example:</h3>
<p>Enable the date picker for an input field.</p>
<pre>
<code class="javascript">$.datepicker.enableFor('#invokeFocus');</code>
</pre>
</div>
</div>
</li>
<li id="link-formatDate-formatdatedayNamesShortdayNamesmonthNamesShortmonthNames">
<span class="fn"><a class="name" href="#link-formatDate-formatdatedayNamesShortdayNamesmonthNamesShortmonthNames">formatDate</a>( <span class="arg-type tooltip" title="A string of characters.">String</span> <span class="arg-name tooltip" title="The format to use in presenting the date.">format</span>, <span class="arg-type tooltip" title="">Date</span> <span class="arg-name tooltip" title="The date value to be displayed.">date</span>, <span class="arg-type tooltip" title="">String[7]</span> <span class="arg-name tooltip" title="The short names for the days of the week, starting at Sunday (optional). Defaults to the datepicker default which is usually standard English.">dayNamesShort</span>, <span class="arg-type tooltip" title="">String[7]</span> <span class="arg-name tooltip" title="The long names for the days of the week, starting at Sunday (optional). Defaults to the datepicker default which is usually standard English.">dayNames</span>, <span class="arg-type tooltip" title="">String[12]</span> <span class="arg-name tooltip" title="The short names for the months of the year (optional). Defaults to the datepicker default which is usually standard English.">monthNamesShort</span>, <span class="arg-type tooltip" title="">String[12]</span> <span class="arg-name tooltip" title="The long names for the months of the year (optional). Defaults to the datepicker default which is usually standard English.">monthNames</span> ) returns <span class="type"><span class="tooltip" title="A string of characters.">String</span></span></span>
<div class="more">
<div class="desc">Format a date into a string value with a specified format.<br>The format can be combinations of the following:
* d  - day of month (no leading zero)
* dd - day of month (two digit)
* D  - day name short
* DD - day name long
* m  - month of year (no leading zero)
* mm - month of year (two digit)
* M  - month name short
* MM - month name long
* y  - year (two digit)
* yy - year (four digit)
* '...' - literal text
* '' - single quote
* anything else - literal text
'''Since v3.1.'''</div>
<div class="example">
<h3>Example:</h3>
<p>Display the date in ISO format. Produces '2007-01-26'.</p>
<pre>
<code class="javascript">$.datepicker.formatDate('yy-mm-dd', new Date(2007, 1 - 1, 26));</code>
</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>Display the date in expanded French format. Produces 'Samedi, Juillet 14, 2007'.</p>
<pre>
<code class="javascript">$.datepicker.formatDate('DD, MM d, yy', new Date(2007, 7 - 1, 14), $.datepicker.regional['fr'].dayNamesShort, $.datepicker.regional['fr'].dayNames, $.datepicker.regional['fr'].monthNamesShort, $.datepicker.regional['fr'].monthNames);</code>
</pre>
</div>
</div>
</li>
<li id="link-getDateFor-control">
<span class="fn"><a class="name" href="#link-getDateFor-control">getDateFor</a>( <span class="arg-type tooltip" title="">Element,Selector,jQuery collection</span> <span class="arg-name tooltip" title="The input field, division or span to which the date picker is attached, or a selector for the input field, or an existing jQuery collection. In the latter two cases only the first element in the collection is used.">control</span> ) returns <span class="type"><span class="tooltip" title="">Date or Date[2]</span></span></span>
<div class="more">
<div class="desc">Retrieve the current date from the date picker attached to an input field.<br>If the date picker has rangeSelect set to true, then a two-element array of dates is returned denoting the start and end of the range.</div>
<div class="example">
<h3>Example:</h3>
<p>Retrieve the date for an input field.</p>
<pre>
<code class="javascript">var date = $.datepicker.getDateFor('#invokeFocus');</code>
</pre>
</div>
</div>
</li>
<li id="link-hideDatepicker-speed">
<span class="fn"><a class="name" href="#link-hideDatepicker-speed">hideDatepicker</a>( <span class="arg-type tooltip" title="A string of characters.">String</span> <span class="arg-name tooltip" title="The speed at which to close the date picker (optional).">speed</span> ) returns <span class="type"><span class="tooltip" title="">Datepicker</span></span></span>
<div class="more">
<div class="desc">Close a previously opened date picker.<br>
</div>
<div class="example">
<h3>Example:</h3>
<p>Close the opened date picker.</p>
<pre>
<code class="javascript">$.datepicker.hideDatepicker();</code>
</pre>
</div>
</div>
</li>
<li id="link-isDisabled-input">
<span class="fn"><a class="name" href="#link-isDisabled-input">isDisabled</a>( <span class="arg-type tooltip" title="">Element,Selector,jQuery collection</span> <span class="arg-name tooltip" title="The input field to which the date picker is attached, or a selector for the input field, or an existing jQuery collection. In the latter two cases only the first element in the collection is used.">input</span> ) returns <span class="type"><span class="tooltip" title="true or false.">Boolean</span></span></span>
<div class="more">
<div class="desc">Determine whether or not an input field has been disabled for the date picker.<br>
</div>
<div class="example">
<h3>Example:</h3>
<p>Retrieve the date for an input field.</p>
<pre>
<code class="javascript">if ($.datepicker.isDisabled('#invokeFocus')) ...</code>
</pre>
</div>
</div>
</li>
<li id="link-iso8601Week-date">
<span class="fn"><a class="name" href="#link-iso8601Week-date">iso8601Week</a>( <span class="arg-type tooltip" title="">Date</span> <span class="arg-name tooltip" title="The date to find the week for.">date</span> ) returns <span class="type"><span class="tooltip" title="A valid numeric.">Number</span></span></span>
<div class="more">
<div class="desc">Determine the week of the year for a given date: 1 to 53.<br>This function uses the ISO 8601 definition of a week: weeks start on a Monday and the first week of the year contains January 4. This means that up to three days from the previous year may be included in the first week of the current year, and that up to three days from the current year may be included in the last week of the previous year.&lt;br/&gt;'''Since v3.1.'''</div>
<div class="example">
<h3>Example:</h3>
<p>Find the week of the year for a date.</p>
<pre>
<code class="javascript">$.datepicker.iso8601Week(new Date(2007, 1 - 1, 26));</code>
</pre>
</div>
</div>
</li>
<li id="link-magnifier-options">
<span class="fn"><a class="name" href="#link-magnifier-options">magnifier</a>( <span class="arg-type tooltip" title="">Options</span> <span class="arg-name tooltip" title="A set of key/value pairs that configure the magnifier. All options are optional.">options</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Make the contents of the selected elements magnify upon mouse proximity.<br>
</div>
<h3>Options</h3>
<ul class="options">
<li>
<span>baseline (<span class="arg-type tooltip" title="A valid numeric.">Number</span>), default: 0</span>
<div>The direction in which the element will rise. Set to -1 to make the element rise up.</div>
</li>
<li>
<span>distance (<span class="arg-type tooltip" title="A valid numeric.">Number</span>), default: 150</span>
<div>How far away the mouse needs to be, in pixels, before it begins having an effect on the element.</div>
</li>
<li>
<span>magnification (<span class="arg-type tooltip" title="A valid numeric.">Number</span>), default: 2</span>
<div>The factor by which the element will be magnified when the mouse is completely over it.</div>
</li>
<li>
<span>opacity (<span class="arg-type tooltip" title="">Object{min:Number, max:Number}</span>), default: {min: 1, max: 1}</span>
<div>The minimum and maximum opacity that an element transitions inbetween (the maximum opacity will be set when the mouse is completely over the element).</div>
</li>
<li>
<span>overlap (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: false</span>
<div>Allow the magnified elements to overlap each other, as opposed to pushing each other out of the way.</div>
</li>
<li>
<span>zIndex (<span class="arg-type tooltip" title="A valid numeric.">Number</span>), default: </span>
<div>The index that the active element takes.</div>
</li>
<li>
<span>click (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>This function is called when the user clicks on one of the magnified items.&lt;br /&gt;

The argument &lt;b&gt;e&lt;/b&gt; is the (click) event.&lt;br /&gt;
The argument &lt;b&gt;ui&lt;/b&gt; is an object with three properties:&lt;br /&gt;
&lt;ul&gt;

&lt;li&gt;&lt;b&gt;options&lt;/b&gt; (ui.options)&lt;br /&gt;
A copy of the options set for this magnifier&lt;/li&gt;
&lt;li&gt;&lt;b&gt;current&lt;/b&gt; (ui.current)&lt;br /&gt;

The DOM element clicked&lt;br /&gt;
&lt;li&gt;&lt;b&gt;currentOffset&lt;/b&gt; (ui.currentOffset)&lt;/li&gt;
The offset object of the clicked DOM element.  (This saves the overhead of reprocessing the element's .offset() .)  Offset object has two properties, top and left, which give the offset relative to the body.&lt;/li&gt;
&lt;/ul&gt;</div>
</li>
</ul>
<div class="example">
<h3>Example:</h3>
<p>Makes the images in the block magnify on mouse move.</p>
<pre>
<code class="javascript">$("#example").magnifier();</code>
</pre>
<h4>HTML:</h4>
<pre>
<code class="html">&lt;script src="http://dev.jquery.com/view/trunk/plugins/dimensions/jquery.dimensions.js"&gt;&lt;/script&gt;

&lt;script src="http://dev.jquery.com/view/trunk/plugins/ui/ui.mouse.js"&gt;&lt;/script&gt;
  &lt;script src="http://dev.jquery.com/view/trunk/plugins/ui/ui.magnifier.js"&gt;&lt;/script&gt;
&lt;div id='example' class="ui-wrapper example" style="padding: 20px;"&gt;
	&lt;img src="http://dev.jquery.com/view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" /&gt;

	&lt;img src="http://dev.jquery.com/view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" /&gt;
	&lt;img src="http://dev.jquery.com/view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" /&gt;

	&lt;img src="http://dev.jquery.com/view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" /&gt;
	&lt;img src="http://dev.jquery.com/view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" /&gt;

	&lt;img src="http://dev.jquery.com/view/trunk/plugins/ui/demos/images/clock.png" width="48" align="left" /&gt;
&lt;/div&gt;
</code>
</pre>
</div>
</div>
</li>
<li id="link-magnifierDestroy-">
<span class="fn"><a class="name" href="#link-magnifierDestroy-">magnifierDestroy</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Destroys all magnifier functionality in the current jQuery.<br>Destroys all magnifier functionality in the current jQuery.</div>
</div>
</li>
<li id="link-magnifierDisable-">
<span class="fn"><a class="name" href="#link-magnifierDisable-">magnifierDisable</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Disables magnification.<br>Temporarily disables magnification on the current jQuery. Can be re-enabled again later on.</div>
</div>
</li>
<li id="link-magnifierEnable-">
<span class="fn"><a class="name" href="#link-magnifierEnable-">magnifierEnable</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Enables magnifying.<br>Re-enables magnifying on the jQuery supplied that has been disabled before.</div>
</div>
</li>
<li id="link-magnifierInstance-">
<span class="fn"><a class="name" href="#link-magnifierInstance-">magnifierInstance</a>(  ) returns <span class="type"><span class="tooltip" title="">Instance</span></span></span>
<div class="more">
<div class="desc">Returns the OO instance of the current magnifier.<br>For the advanced, this function is very useful to modify internals of the magnifier after initializing it. It returns a javascript function instance.</div>
</div>
</li>
<li id="link-magnifierReset-">
<span class="fn"><a class="name" href="#link-magnifierReset-">magnifierReset</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Resets the magnifying on a magnified set of elements.<br>This option resets the magnification to zero on the current set. It's very useful if you want to have another effect on click, for example.</div>
</div>
</li>
<li id="link-parseDate-formatvalueshortYearCutoffdayNamesShortdayNamesmonthNamesShortmonthNames">
<span class="fn"><a class="name" href="#link-parseDate-formatvalueshortYearCutoffdayNamesShortdayNamesmonthNamesShortmonthNames">parseDate</a>( <span class="arg-type tooltip" title="A string of characters.">String</span> <span class="arg-name tooltip" title="The format to use in extracting the date.">format</span>, <span class="arg-type tooltip" title="A string of characters.">String</span> <span class="arg-name tooltip" title="The date value to be examined.">value</span>, <span class="arg-type tooltip" title="A valid numeric.">Number</span> <span class="arg-name tooltip" title="The value (0-99) beyond which years are considered to be in the previous century. Used in conjunction with the 'y' format option. Defaults to the datepicker default which is usually 10 years in the future.">shortYearCutoff</span>, <span class="arg-type tooltip" title="">String[7]</span> <span class="arg-name tooltip" title="The short names for the days of the week, starting at Sunday (optional). Defaults to the datepicker default which is usually standard English.">dayNamesShort</span>, <span class="arg-type tooltip" title="">String[7]</span> <span class="arg-name tooltip" title="The long names for the days of the week, starting at Sunday (optional). Defaults to the datepicker default which is usually standard English.">dayNames</span>, <span class="arg-type tooltip" title="">String[12]</span> <span class="arg-name tooltip" title="The short names for the months of the year (optional). Defaults to the datepicker default which is usually standard English.">monthNamesShort</span>, <span class="arg-type tooltip" title="">String[12]</span> <span class="arg-name tooltip" title="The long names for the months of the year (optional). Defaults to the datepicker default which is usually standard English.">monthNames</span> ) returns <span class="type"><span class="tooltip" title="">Date</span></span></span>
<div class="more">
<div class="desc">Extract a date from a string value with a specified format.<br>The format can be combinations of the following:
* d  - day of month (no leading zero)
* dd - day of month (two digit)
* D  - day name short
* DD - day name long
* m  - month of year (no leading zero)
* mm - month of year (two digit)
* M  - month name short
* MM - month name long
* y  - year (two digit)
* yy - year (four digit)
* '...' - literal text
* '' - single quote
* anything else - literal text
A number of exceptions may be thrown:
* 'Invalid arguments' if either ''format'' or ''value'' is null
* 'Missing number at position nn' if ''format'' indicated a numeric value that is not then found
* 'Unknown name at position nn' if ''format'' indicated day or month name that is not then found
* 'Unexpected literal at position nn' if ''format'' indicated a literal value that is not then found
* 'Invalid date' if the date is invalid, such as '31/02/2007'
'''Since v3.1.'''</div>
<div class="example">
<h3>Example:</h3>
<p>Extract a date in ISO format.</p>
<pre>
<code class="javascript">$.datepicker.parseDate('yy-mm-dd', '2007-01-26');</code>
</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>Extract a date in expanded French format.</p>
<pre>
<code class="javascript">$.datepicker.parseDate('DD, MM d, yy', 'Samedi, Juillet 14, 2007', 20, $.datepicker.regional['fr'].dayNamesShort, $.datepicker.regional['fr'].dayNames, $.datepicker.regional['fr'].monthNamesShort, $.datepicker.regional['fr'].monthNames);</code>
</pre>
</div>
</div>
</li>
<li id="link-reconfigureFor-controlsettings">
<span class="fn"><a class="name" href="#link-reconfigureFor-controlsettings">reconfigureFor</a>( <span class="arg-type tooltip" title="">Element,Selector,jQuery collection</span> <span class="arg-name tooltip" title="The input field, division or span to which the date picker is attached, or a jQuery selector for these fields, or an existing jQuery collection.">control</span>, <span class="arg-type tooltip" title="">Options</span> <span class="arg-name tooltip" title="The new settings for these date pickers.">settings</span> ) returns <span class="type"><span class="tooltip" title="">Datepicker</span></span></span>
<div class="more">
<div class="desc">Change the settings for a previously attached date picker.<br>
</div>
<div class="example">
<h3>Example:</h3>
<p>Reconfigure the date picker for an input field - changing its opening speed.</p>
<pre>
<code class="javascript">$.datepicker.reconfigureFor('#reconfigureCal', {speed: select.options[select.selectedIndex].value});</code>
</pre>
</div>
</div>
</li>
<li id="link-resizable-options">
<span class="fn"><a class="name" href="#link-resizable-options">resizable</a>( <span class="arg-type tooltip" title="">Options</span> <span class="arg-name tooltip" title="A set of key/value pairs that configure the resizable. All options are optional, but a resizable will not be useful without at least one handle.">options</span> ) returns <span class="type"><span class="tooltip" title=""></span></span></span>
<div class="more">
<div class="desc">Creates new resizables on the nodeset supplied by the query.<br>This jQuery plugin makes DOM nodes resizable (meaning they have draggable resize handles). You can specify one or more handles as well as min and max width and height.</div>
<h3>Options</h3>
<ul class="options">
<li>
<span>handles (<span class="arg-type tooltip" title="">{n, e, s, w, ne, se, sw, nw}</span>), default: </span>
<div>Each handle string (if specified) should be a jquery selector matching the child element of the resizable to use as the handle. If the handle is not a child of the resizable, you can pass in the DOM node or a valid jQuery object directly. </div>
</li>
<li>
<span>containment (<span class="arg-type tooltip" title="">Element, Selector</span>), default: </span>
<div>Constrains resizing to within the bounds of the specified element - can be a DOM element, 'parent', 'document' or a jQuery selector.</div>
</li>
<li>
<span>maxHeight (<span class="arg-type tooltip" title="">Int</span>), default: </span>
<div>This is the maximum height the resizable should be allowed to resize to.</div>
</li>
<li>
<span>maxWidth (<span class="arg-type tooltip" title="">Int</span>), default: </span>
<div>This is the maximum width the resizable should be allowed to resize to.</div>
</li>
<li>
<span>minHeight (<span class="arg-type tooltip" title="">Int</span>), default: </span>
<div>This is the minimum height the resizable should be allowed to resize to.</div>
</li>
<li>
<span>minWidth (<span class="arg-type tooltip" title="">Int</span>), default: </span>
<div>This is the minimum width the resizable should be allowed to resize to.</div>
</li>
<li>
<span>proxy (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>This is the css class that will be added to a proxy element to outline the resize during the drag of the resize handle. Once the resize is complete, the element is sized.</div>
</li>
<li>
<span>destructive (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: </span>
<div>Largely internal option. For elements that cannot have childnodes, it creates a wrapper div and all handles by itself, allowing to still control them via css. Try doing $('textarea').resizable() for an example. </div>
</li>
<li>
<span>proportionallyResize (<span class="arg-type tooltip" title="">Array</span>), default: </span>
<div>Advanced option that allows other elements to get proportionally resized together with the original one. Just specify jquery string in this array or directly insert DOM nodes.</div>
</li>
<li>
<span>start (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>This function is called at the start of a resize operation.</div>
</li>
<li>
<span>resize (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>This function is called during the resize, on the drag of the resize handler.</div>
</li>
<li>
<span>stop (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>This function is called at the end of a resize operation.</div>
</li>
</ul>
<div class="example">
<h3>Example:</h3>
<p>A simple jQuery UI Resizable.</p>
<pre>
<code class="javascript">$("#example").resizable();</code>
</pre>
<h4>HTML:</h4>
<pre>
<code class="html">&lt;link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)"&gt;

&lt;script  src="http://dev.jquery.com/view/trunk/plugins/dimensions/jquery.dimensions.js"&gt;&lt;/script&gt;
&lt;script src="http://dev.jquery.com/view/trunk/ui/current/ui.mouse.js"&gt;&lt;/script&gt;
&lt;script src="http://dev.jquery.com/view/trunk/ui/current/ui.resizable.js"&gt;&lt;/script&gt;
&lt;div id='example' class="ui-wrapper example"&gt;
&lt;div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'&gt;Resize me&lt;/div&gt;

&lt;/div&gt;
</code>
</pre>
</div>
</div>
</li>
<li id="link-resizableDestroy-">
<span class="fn"><a class="name" href="#link-resizableDestroy-">resizableDestroy</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Destroys all resizing functionality in the current jQuery.<br>Destroys all resizing functionality in the current jQuery.</div>
</div>
</li>
<li id="link-resizableDisable-">
<span class="fn"><a class="name" href="#link-resizableDisable-">resizableDisable</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Disables resizing.<br>Temporarily disables resizing on the current jQuery. Can be re-enabled again later on.</div>
</div>
</li>
<li id="link-resizableEnable-">
<span class="fn"><a class="name" href="#link-resizableEnable-">resizableEnable</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Enables resizing.<br>Re-enables resizing functionality on the jQuery supplied that has been disabled before.</div>
</div>
</li>
<li id="link-resizableInstance-">
<span class="fn"><a class="name" href="#link-resizableInstance-">resizableInstance</a>(  ) returns <span class="type"><span class="tooltip" title="">Instance</span></span></span>
<div class="more">
<div class="desc">Returns the OO instance of the current resizable.<br>For the advanced, this function is very useful to modify internals of the resizable after initializing it. It returns a javascript function instance.</div>
</div>
</li>
<li id="link-selectable-options">
<span class="fn"><a class="name" href="#link-selectable-options">selectable</a>( <span class="arg-type tooltip" title="">Options</span> <span class="arg-name tooltip" title="A set of key/value pairs that configure the selectable. All options are optional.">options</span> ) returns <span class="type"><span class="tooltip" title=""></span></span></span>
<div class="more">
<div class="desc">Creates new selectable on the nodeset supplied by the query.<br>
</div>
<h3>Options</h3>
<ul class="options">
<li>
<span>filter (<span class="arg-type tooltip" title="">Selector</span>), default: </span>
<div>The matching child elements will be made selectees (able to be selected). Default value: '*'</div>
</li>
<li>
<span>selected (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: </span>
<div>This callback is fired at the end of the select operation, on each element added to the selection.</div>
</li>
<li>
<span>selecting (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: </span>
<div>This callback is fired during the select operation, on each element added to the selection.</div>
</li>
<li>
<span>unselected (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: </span>
<div>This callback is fired at the end of the select operation, on each element removed from the selection.</div>
</li>
<li>
<span>unselecting (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: </span>
<div>This callback is fired during the select operation, on each element removed from the selection.</div>
</li>
</ul>
<div class="example">
<h3>Example:</h3>
<p>Basic Example of a selectable. (Draw a box with your mouse to select items.)</p>
<pre>
<code class="javascript">$("#myList").selectable();</code>
</pre>
<h4>HTML:</h4>
<pre>
<code class="html">&lt;script  src="http://dev.jquery.com/view/trunk/plugins/dimensions/jquery.dimensions.js"&gt;&lt;/script&gt;

&lt;script src="http://dev.jquery.com/view/trunk/plugins/ui/ui.mouse.js"&gt;&lt;/script&gt;
&lt;script src="http://dev.jquery.com/view/trunk/plugins/ui/ui.draggable.js"&gt;&lt;/script&gt;
&lt;script src="http://dev.jquery.com/view/trunk/plugins/ui/ui.droppable.js"&gt;&lt;/script&gt;
&lt;script src="http://dev.jquery.com/view/trunk/plugins/ui/ui.selectable.js"&gt;&lt;/script&gt;
&lt;ul id="myList"&gt;

	    &lt;li&gt;Item 1&lt;/li&gt;
	    &lt;li&gt;Item 2&lt;/li&gt;
	    &lt;li&gt;Item 3&lt;/li&gt;
	    &lt;li&gt;Item 4&lt;/li&gt;

&lt;/ul&gt;
</code>
</pre>
</div>
</div>
</li>
<li id="link-setDateFor-controldateendDate">
<span class="fn"><a class="name" href="#link-setDateFor-controldateendDate">setDateFor</a>( <span class="arg-type tooltip" title="">Element,Selector,jQuery collection</span> <span class="arg-name tooltip" title="The input field, division or span to which the date picker is attached, or a selector for the input field, or an existing jQuery collection. In the latter two cases only the first element in the collection is used.">control</span>, <span class="arg-type tooltip" title="">Date</span> <span class="arg-name tooltip" title="The new date value (starting date for a date range).">date</span>, <span class="arg-type tooltip" title="">Date</span> <span class="arg-name tooltip" title="The new end date value for a date range (optional).">endDate</span> ) returns <span class="type"><span class="tooltip" title="">Datepicker</span></span></span>
<div class="more">
<div class="desc">Set the current date for the date picker attached to an input field.<br>
</div>
<div class="example">
<h3>Example:</h3>
<p>Set the date for an input field.</p>
<pre>
<code class="javascript">$.datepicker.setDateFor('#invokeFocus', new Date(2007, 1 - 1, 26));</code>
</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>Set the date for a date range input field.</p>
<pre>
<code class="javascript">$.datepicker.setDateFor('#dateRange', new Date(2007, 1 - 1, 26), new Date(2007, 1 - 1, 30));</code>
</pre>
</div>
</div>
</li>
<li id="link-setDefaults-settings">
<span class="fn"><a class="name" href="#link-setDefaults-settings">setDefaults</a>( <span class="arg-type tooltip" title="">Options</span> <span class="arg-name tooltip" title="The new settings for all date pickers. See the <a href='UI/Datepicker/datepicker'>datepicker options</a>.">settings</span> ) returns <span class="type"><span class="tooltip" title="">Datepicker</span></span></span>
<div class="more">
<div class="desc">Change the default settings for all date pickers<br>
</div>
<div class="example">
<h3>Example:</h3>
<p>Set all date pickers to open on focus or a click on an icon.</p>
<pre>
<code class="javascript">$.datepicker.setDefaults({showOn: 'both', buttonImageOnly: true, buttonImage: 'calendar.gif', buttonText: 'Calendar'});</code>
</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>Set all date pickers to have French text.</p>
<pre>
<code class="javascript">$.datepicker.setDefaults($.datepicker.regional['fr']);</code>
</pre>
</div>
</div>
</li>
<li id="link-shadow-options">
<span class="fn"><a class="name" href="#link-shadow-options">shadow</a>( <span class="arg-type tooltip" title="">Options</span> <span class="arg-name tooltip" title="A set of key/value pairs that configure the shadow. All options are optional.">options</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Add a drop shadow to the matched elements.<br>
</div>
<h3>Options</h3>
<ul class="options">
<li>
<span>color (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>The color of the drop shadow.</div>
</li>
<li>
<span>offset (<span class="arg-type tooltip" title="A valid numeric.">Number</span>), default: 0</span>
<div>How far away the drop shadow is positioned from the element, in pixels.</div>
</li>
<li>
<span>opacity (<span class="arg-type tooltip" title="A valid numeric.">Number</span>), default: 0.2</span>
<div>How transparent to make the drop shadow.</div>
</li>
</ul>
<div class="example">
<h3>Example:</h3>
<p>Adds a drop shadow to the example element.</p>
<pre>
<code class="javascript">$("#example").shadow();</code>
</pre>
<h4>HTML:</h4>
<pre>
<code class="html">&lt;link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)"&gt;

&lt;script src="http://dev.jquery.com/view/trunk/plugins/dimensions/jquery.dimensions.js"&gt;&lt;/script&gt;
&lt;script src="http://dev.jquery.com/view/trunk/plugins/ui/ui.shadow.js"&gt;&lt;/script&gt;
&lt;img id="example" style="height: 100px;" src="http://dev.jquery.com/view/trunk/plugins/ui/demos/images/resizable.jpg" /&gt;</code>
</pre>
</div>
</div>
</li>
<li id="link-shadowDestroy-">
<span class="fn"><a class="name" href="#link-shadowDestroy-">shadowDestroy</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Destroys all shadows attached to the current jQuery elements.<br>Destroys all shadows on the current elements. Cannot be reverted.</div>
</div>
</li>
<li id="link-shadowDisable-">
<span class="fn"><a class="name" href="#link-shadowDisable-">shadowDisable</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Disables shadows.<br>Temporarily disables shadows on the current jQuery. Can be re-enabled again later on.</div>
</div>
</li>
<li id="link-shadowEnable-">
<span class="fn"><a class="name" href="#link-shadowEnable-">shadowEnable</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Enables shadows.<br>Re-enables shadows on the jQuery supplied that has been disabled before.</div>
</div>
</li>
<li id="link-showFor-target">
<span class="fn"><a class="name" href="#link-showFor-target">showFor</a>( <span class="arg-type tooltip" title="The Javascript object representation of a DOM Element.">Element</span> <span class="arg-name tooltip" title="The input field to which the date picker is attached, or a selector for the input field, or an existing jQuery collection. In the latter two cases only the first element in the collection is used.">target</span> ) returns <span class="type"><span class="tooltip" title="">Datepicker</span></span></span>
<div class="more">
<div class="desc">Call up a previously attached date picker.<br>
</div>
<div class="example">
<h3>Example:</h3>
<p>Bring up the date picker for an input field.</p>
<pre>
<code class="javascript">$.datepicker.showFor('#invokeFocus');</code>
</pre>
</div>
</div>
</li>
<li id="link-slider-options">
<span class="fn"><a class="name" href="#link-slider-options">slider</a>( <span class="arg-type tooltip" title="">Options</span> <span class="arg-name tooltip" title="A set of key/value pairs that configure the slider. All options are optional, but a slider will not be useful without at least one callback.">options</span> ) returns <span class="type"><span class="tooltip" title=""></span></span></span>
<div class="more">
<div class="desc">Makes a slider from the nodeset supplied by the query.<br>With this plugin, you can generate sliders with a wide range of options, including multiple handles, callbacks and more.</div>
<h3>Options</h3>
<ul class="options">
<li>
<span>handle (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div> The jquery selector to use for the handle of the slider (defaults to ".ui-slider-handle"). </div>
</li>
<li>
<span>minValue (<span class="arg-type tooltip" title="">Int</span>), default: </span>
<div> The minimum value of the slider. Useful for tracking values via callback, and to set steps. </div>
</li>
<li>
<span>maxValue (<span class="arg-type tooltip" title="">Int</span>), default: </span>
<div> The maximum value of the slider. Useful for tracking values via callback, and to set steps. </div>
</li>
<li>
<span>startValue (<span class="arg-type tooltip" title="">Int</span>), default: </span>
<div> The value the handle will have first. </div>
</li>
<li>
<span>stepping (<span class="arg-type tooltip" title="">Int</span>), default: </span>
<div> If defined, the new value has to be dividable through this number, so the slider jumps from step to step.  </div>
</li>
<li>
<span>steps (<span class="arg-type tooltip" title="">Int</span>), default: </span>
<div> Alternative to stepping, this defines how many steps a slider will have, instead of how many values to jump, as in stepping.  </div>
</li>
<li>
<span>axis (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div> Usually you don't have to set that option, because the slider finds out automatically if you want a horizontal or a vertical slider. In case it's not correctly detected, insert 'horizontal'/'vertical'.  </div>
</li>
<li>
<span>stop (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: </span>
<div> Function that gets called when the user stops sliding.  Takes arguments e and ui, for event and user-interface respectively.  Use ui.value (single-handled sliders) or ui.values (multi-handled sliders) to obtain the value of the slider.</div>
</li>
<li>
<span>start (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: </span>
<div> Function that gets called when the user starts sliding.  Takes arguments e and ui, for event and user-interface respectively.  Use ui.value (single-handled sliders) or ui.values (multi-handled sliders) to obtain the value of the slider.</div>
</li>
<li>
<span>slide (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: </span>
<div> Function that gets called on every mouse move during slide.  Takes arguments e and ui, for event and user-interface respectively.  Use ui.value (single-handled sliders) or ui.values (multi-handled sliders) to obtain the value of the slider.  For example:

&lt;pre&gt;

$(window).bind("load",function(){
	$('#sliderId').slider({ 
	          steps: 10,
		  minValue: 0,
		  maxValue: 10,
		  slide: function(e,ui) { 
		     $("#slider-min").text( ui.values[0] ); 
		     $("#slider-max").text( ui.values[1] ); 
		  }
		   });
&lt;/pre&gt;

This example creates a double slider from 0-10 with "10" steps (actually eleven positions) and prints the values in spans/divs with the id tags &lt;code&gt;slider-min&lt;/code&gt; and &lt;code&gt;slider-max&lt;/code&gt;.For a single slider, all that is needed is ui.value.

</div>
</li>
<li>
<span>change (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: </span>
<div> Function that gets called on slide stop, but only if the slider position has changed.  Takes arguments e and ui, for event and user-interface respectively.  Use ui.value (single-handled sliders) or ui.values (multi-handled sliders) to obtain the value of the slider.</div>
</li>
</ul>
<div class="example">
<h3>Example:</h3>
<p>A simple jQuery UI Accordion.</p>
<pre>
<code class="javascript">$("#example").slider();</code>
</pre>
<h4>HTML:</h4>
<pre>
<code class="html">&lt;link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)"&gt;

&lt;script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/dimensions/jquery.dimensions.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/ui/ui.mouse.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/ui/ui.slider.js"&gt;&lt;/script&gt;

&lt;div id='example' class='ui-slider-1' style="margin:10px;"&gt;
&lt;div class='ui-slider-handle'&gt;&lt;/div&gt;	
&lt;/div&gt;</code>
</pre>
</div>
</div>
</li>
<li id="link-sortable-options">
<span class="fn"><a class="name" href="#link-sortable-options">sortable</a>( <span class="arg-type tooltip" title="">Options</span> <span class="arg-name tooltip" title="A set of key/value pairs that configure the sortable. All options are optional.">options</span> ) returns <span class="type"><span class="tooltip" title=""></span></span></span>
<div class="more">
<div class="desc">Creates new sortable on the nodeset supplied by the query.<br>This jQuery plugin makes DOM nodes sortable by mouse. You can additionally supply a great range of options to make them fit your needs.</div>
<h3>Options</h3>
<ul class="options">
<li>
<span>items (<span class="arg-type tooltip" title="">Selector</span>), default: </span>
<div>Items to apply sorting to.</div>
</li>
<li>
<span>helper (<span class="arg-type tooltip" title="">Element function()</span>), default: </span>
<div>Allows for a helper element to be used for dragging display. The supplied function should return a valid DOM node to be used as a custom proxy helper.</div>
</li>
<li>
<span>containment (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>Constrains dragging to within the bounds of the specified element. Possible values: 'parent', 'document', jQuery String.</div>
</li>
<li>
<span>zIndex (<span class="arg-type tooltip" title="">int</span>), default: </span>
<div>z-index for element/helper while being sorted.</div>
</li>
<li>
<span>hoverClass (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>Class that gets applied to the otherwise white space.</div>
</li>
<li>
<span>start (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>Function to call when sorting starts.</div>
</li>
<li>
<span>stop (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>Function to call when sorting stops.</div>
</li>
<li>
<span>update (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>Function to call when the user stopped sorting and something has changed.</div>
</li>
<li>
<span>sort (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>Function to call during sorting.</div>
</li>
<li>
<span>change (<span class="arg-type tooltip" title="">function(e, ui)</span>), default: </span>
<div>Function to call during sorting, when something changed.</div>
</li>
</ul>
<div class="example">
<h3>Example:</h3>
<p>Basic Example of a sortable.</p>
<pre>
<code class="javascript">$("#myList").sortable({});</code>
</pre>
<h4>HTML:</h4>
<pre>
<code class="html">&lt;script  src="http://dev.jquery.com/view/trunk/plugins/dimensions/jquery.dimensions.js"&gt;&lt;/script&gt;

&lt;script src="http://dev.jquery.com/view/trunk/plugins/ui/ui.mouse.js"&gt;&lt;/script&gt;
&lt;script src="http://dev.jquery.com/view/trunk/plugins/ui/ui.draggable.js"&gt;&lt;/script&gt;
&lt;script src="http://dev.jquery.com/view/trunk/plugins/ui/ui.droppable.js"&gt;&lt;/script&gt;
&lt;script src="http://dev.jquery.com/view/trunk/plugins/ui/ui.sortable.js"&gt;&lt;/script&gt;
&lt;ul id="myList"&gt;

	    &lt;li&gt;Item 1&lt;/li&gt;
	    &lt;li&gt;Item 2&lt;/li&gt;
	    &lt;li&gt;Item 3&lt;/li&gt;
	    &lt;li&gt;Item 4&lt;/li&gt;

&lt;/ul&gt;
</code>
</pre>
</div>
</div>
</li>
<li id="link-sortableDestroy-">
<span class="fn"><a class="name" href="#link-sortableDestroy-">sortableDestroy</a>(  ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Destroys all sortable functionality in the current jQuery.<br>
</div>
</div>
</li>
<li id="link-tablesorter-options">
<span class="fn"><a class="name" href="#link-tablesorter-options">tablesorter</a>( <span class="arg-type tooltip" title="">Options</span> <span class="arg-name tooltip" title="A set of key/value pairs that configure tablesorter. All options are optional.">options</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">Create a sortable table with multi-column sorting capabilities.<br>
</div>
<h3>Options</h3>
<ul class="options">
<li>
<span>cssHeader (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>A string of the class name to be appended to sortable tr elements in the thead of the table.</div>
</li>
<li>
<span>cssAsc (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>A string of the class name to be appended to sortable tr elements in the thead on a ascending sort.</div>
</li>
<li>
<span>cssDesc (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>A string of the class name to be appended to sortable tr elements in the thead on a descending sort.</div>
</li>
<li>
<span>sortMultisortKey (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>A string of the multi-column sort key.</div>
</li>
<li>
<span>textExtraction (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: </span>
<div>A string of the text-extraction method to use. For complex HTML structures inside td cell set this option to "complex", on large tables the complex option can be slow.</div>
</li>
<li>
<span>headers (<span class="arg-type tooltip" title="A simple Javascript object..">Object</span>), default: </span>
<div>An object of instructions for per-column controls.</div>
</li>
<li>
<span>sortList (<span class="arg-type tooltip" title="">Array</span>), default: </span>
<div>An array of instructions for per-column sorting and direction in the format: [columnIndex, sortDirection] where columnIndex is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending.</div>
</li>
<li>
<span>sortForce (<span class="arg-type tooltip" title="">Array</span>), default: </span>
<div>Use to add an additional forced sort that will be appended to the dynamic selections by the user. For example, can be used to sort people alphabetically after some other user-selected sort that results in rows with the same value like dates or money due. It can help prevent data from appearing as though it has a random secondary sort.</div>
</li>
<li>
<span>widthFixed (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: </span>
<div>Indicates if tablesorter should apply fixed widths to the table columns. This is useful for the Pager companion. Requires the jQuery dimension plugin to work.</div>
</li>
<li>
<span>cancelSelection (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: </span>
<div>Indicates if tablesorter should disable selection of text in the table header (TH). Makes header behave more like a button.</div>
</li>
<li>
<span>debug (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: </span>
<div>Enables debugging mode, useful for development.</div>
</li>
</ul>
<div class="example">
<h3>Example:</h3>
<p>A simple Table Sorter.</p>
<pre>
<code class="javascript">$("#example").tablesorter({sortList:&lt;a href='0,0],[2,1'&gt;0,0],[2,1&lt;/a&gt;, widgets: ['zebra']});</code>
</pre>
<h4>HTML:</h4>
<pre>
<code class="html">&lt;link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)"&gt;

&lt;script  src="http://dev.jquery.com/view/trunk/plugins/tablesorter/2.0/jquery.tablesorter.js"&gt;&lt;/script&gt;

	&lt;table id="example" class="tablesorter" border="0" cellpadding="0" cellspacing="1"&gt;

		&lt;thead&gt;
			&lt;tr&gt;
				&lt;th&gt;First Name&lt;/th&gt;
				&lt;th&gt;Last Name&lt;/th&gt;

				&lt;th&gt;Age&lt;/th&gt;
				&lt;th&gt;Total&lt;/th&gt;
				&lt;th&gt;Discount&lt;/th&gt;
				&lt;th&gt;Date&lt;/th&gt;

			&lt;/tr&gt;
		&lt;/thead&gt;
		&lt;tbody&gt;

			&lt;tr&gt;
				&lt;td&gt;Peter&lt;/td&gt;

				&lt;td&gt;Parker&lt;/td&gt;
				&lt;td&gt;28&lt;/td&gt;
				&lt;td&gt;$9.99&lt;/td&gt;
				&lt;td&gt;20%&lt;/td&gt;

				&lt;td&gt;Jul 6, 2006 8:14 AM&lt;/td&gt;
			&lt;/tr&gt;
			&lt;tr&gt;
				&lt;td&gt;John&lt;/td&gt;

				&lt;td&gt;Hood&lt;/td&gt;
				&lt;td&gt;33&lt;/td&gt;
				&lt;td&gt;$19.99&lt;/td&gt;

				&lt;td&gt;25%&lt;/td&gt;

				&lt;td&gt;Dec 10, 2002 5:14 AM&lt;/td&gt;
			&lt;/tr&gt;
			&lt;tr&gt;
				&lt;td&gt;Clark&lt;/td&gt;
				&lt;td&gt;Kent&lt;/td&gt;

				&lt;td&gt;18&lt;/td&gt;

				&lt;td&gt;$15.89&lt;/td&gt;
				&lt;td&gt;44%&lt;/td&gt;
				&lt;td&gt;Jan 12, 2003 11:14 AM&lt;/td&gt;

			&lt;/tr&gt;
			&lt;tr&gt;
				&lt;td&gt;Bruce&lt;/td&gt;
				&lt;td&gt;Almighty&lt;/td&gt;

				&lt;td&gt;45&lt;/td&gt;
				&lt;td&gt;$153.19&lt;/td&gt;
				&lt;td&gt;44%&lt;/td&gt;
				
				&lt;td&gt;Jan 18, 2001 9:12 AM&lt;/td&gt;

			&lt;/tr&gt;
			&lt;tr&gt;
				&lt;td&gt;Bruce&lt;/td&gt;

				&lt;td&gt;Evans&lt;/td&gt;

				&lt;td&gt;22&lt;/td&gt;
				&lt;td&gt;$13.19&lt;/td&gt;
				&lt;td&gt;11%&lt;/td&gt;
				&lt;td&gt;Jan 18, 2007 9:12 AM&lt;/td&gt;

			&lt;/tr&gt;

		&lt;/tbody&gt;
	&lt;/table&gt;</code>
</pre>
</div>
</div>
</li>
<li id="link-tabs-initialoptions">
<span class="fn"><a class="name" href="#link-tabs-initialoptions">tabs</a>( <span class="arg-type tooltip" title="A valid numeric.">Number</span> <span class="arg-name tooltip" title="An integer specifying the position of the tab (no zero-based index) that is selected on initialization.">initial</span>, <span class="arg-type tooltip" title="">Options</span> <span class="arg-name tooltip" title="A set of key/value pairs that configures the tabs interface. All options are optional.">options</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">The method that you use to create a new tabs interface.<br>
</div>
<h3>Options</h3>
<ul class="options">
<li>
<span>event (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: click</span>
<div>The type of event to be used for selecting a tab.</div>
</li>
<li>
<span>disabled (<span class="arg-type tooltip" title="">Array&lt;Number&gt;</span>), default: []</span>
<div>An array containing the position of the tabs (no zero-based index) that should be disabled on initialization.</div>
</li>
<li>
<span>cookie (<span class="arg-type tooltip" title="A simple Javascript object..">Object</span>), default: </span>
<div>Retrieve the active tab to start with from a cookie. Requires cookie plugin. The object needs to have key/value pairs of the form the cookie plugin expects as options. Available options: &amp;#123; expires: 7, path: '/', domain: 'jquery.com', secure: true &amp;#125;</div>
</li>
<li>
<span>unselected (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: false</span>
<div>Wether or not to start with all tabs unselected.</div>
</li>
<li>
<span>unselect (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: false, as the case may be unselected is enabled true</span>
<div>Wether or not to hide an already selected tab on click.</div>
</li>
<li>
<span>spinner (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: Loading&amp;amp;#8230;</span>
<div>The HTML content of this string is shown in a tab title while remote content is loading. Pass in empty string to deactivate that behavior.</div>
</li>
<li>
<span>cache (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: false</span>
<div>Wether or not to cache remote tabs content, e.g. load only once or with every click. Cached content is being lazy loaded, e.g once on the first click. Note that to prevent the actual Ajax requests from being cached by the browser you need to provide an extra cache: false flag to ajaxOptions.</div>
</li>
<li>
<span>ajaxOptions (<span class="arg-type tooltip" title="">Options</span>), default: </span>
<div>Additional Ajax options to consider when loading tab content (see $.ajax).</div>
</li>
<li>
<span>idPrefix (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: ui-tabs-</span>
<div>If the remote tab, its anchor element that is, has no title attribute to generate an id from, an id/fragment identifier is created from this prefix and a unique id returned by $.data(el), for example "ui-tabs-54".</div>
</li>
<li>
<span>fxFade (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: false</span>
<div>Wether or not to use fade in/out animations for tabs showing/hiding. Can be combined with fxSlide. Will overrule fxShow/fxHide.</div>
</li>
<li>
<span>fxSlide (<span class="arg-type tooltip" title="true or false.">Boolean</span>), default: false</span>
<div>Wether or not to use slide down/up animations for tabs showing/hiding. Can be combined with fxFade. Will overrule fxShow/fxHide.</div>
</li>
<li>
<span>fxShow (<span class="arg-type tooltip" title="">Options</span>), default: </span>
<div>Key/value pairs of the form jQuery's animate function expects for creating a custom animation to show a tab. Unlike fxFade or fxSlide this animation is independent from optional fxHide.</div>
</li>
<li>
<span>fxHide (<span class="arg-type tooltip" title="">Options</span>), default: </span>
<div>Key/value pairs of the form jQuery's animate function expects for creating a custom animation to hide a tab. Unlike fxFade or fxSlide this animation is independent from optional fxShow.</div>
</li>
<li>
<span>fxSpeed (<span class="arg-type tooltip" title="">String,Number</span>), default: normal</span>
<div>A string representing one of the three predefined speeds ("slow", "normal", "fast") or the duration in milliseconds to run an animation.</div>
</li>
<li>
<span>fxShowSpeed (<span class="arg-type tooltip" title="">String,Number</span>), default: fxSpeed</span>
<div>A string representing one of the three predefined speeds ("slow", "normal", "fast") or the duration in milliseconds to run a show animation (fxFade, fxSlide, fxShow).</div>
</li>
<li>
<span>fxHideSpeed (<span class="arg-type tooltip" title="">String,Number</span>), default: fxSpeed</span>
<div>A string representing one of the three predefined speeds ("slow", "normal", "fast") or the duration in milliseconds to run a hide animation (fxFade, fxSlide, fxHide).</div>
</li>
<li>
<span>add (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: </span>
<div>Tab added callback, called with two arguments: added tab, added tab container (in this order).</div>
</li>
<li>
<span>remove (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: </span>
<div>Tab removed callback, called with two arguments: removed tab, removed tab container (in this order).</div>
</li>
<li>
<span>enable (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: </span>
<div>Tab enabled callback, called with two arguments: enabled tab, enabled tab container (in this order).</div>
</li>
<li>
<span>disable (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: </span>
<div>Tab disabled callback, called with two arguments: disabled tab, disabled tab container (in this order).</div>
</li>
<li>
<span>click (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: </span>
<div>Tab clicked callback, called with three arguments: clicked tab, tab container to show, tab container to hide (in this order). If callback returns false the tab click is aborted.</div>
</li>
<li>
<span>show (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: </span>
<div>Tab shown callback, called with three arguments: clicked tab, tab container to show, tab container to hide (in this order).</div>
</li>
<li>
<span>hide (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: </span>
<div>Tab hidden callback, called with three arguments: clicked tab, tab container to hide, tab container to show (in this order).</div>
</li>
<li>
<span>load (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>), default: </span>
<div>Remote tab content loaded callback, called with two arguments: clicked, e.g. loading tab, loaded tab content container (in this order).</div>
</li>
<li>
<span>tabTemplate (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: &amp;lt;li&amp;gt;&amp;lt;a href&amp;#61;"#&amp;#123;href&amp;#125;"&amp;gt;&amp;lt;span&amp;gt;#&amp;#123;text&amp;#125;&amp;lt;/span&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;</span>
<div>HTML template from which a new tab is created and added with the tabsAdd method. The placeholders #&amp;#123;href&amp;#125; and #&amp;#123;text&amp;#125; are replaced with the url and tab title that are passed as arguments to the tabsAdd method.</div>
</li>
<li>
<span>panelTemplate (<span class="arg-type tooltip" title="A string of characters.">String</span>), default: &amp;lt;div&amp;gt;&amp;lt;/div&amp;gt;</span>
<div>HTML template from which a new tab panel is created in case of adding a tab with the tabsAdd method or when creating a panel for a remote tab on the fly.</div>
</li>
</ul>
<div class="example">
<h3>Example:</h3>
<p>A simple jQuery UI Tabbed pane.</p>
<pre>
<code class="javascript">$("#example &gt; ul").tabs();</code>
</pre>
<h4>HTML:</h4>
<pre>
<code class="html">&lt;link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)"&gt;

&lt;script type="text/javascript" src="http://dev.jquery.com/view/trunk/ui/current/ui.tabs.js"&gt;&lt;/script&gt;

        &lt;div id="example" class="flora"&gt;
            &lt;ul&gt;

                &lt;li&gt;&lt;a href="#fragment-1"&gt;&lt;span&gt;One&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#fragment-2"&gt;&lt;span&gt;Two&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

                &lt;li&gt;&lt;a href="#fragment-3"&gt;&lt;span&gt;Three&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;div id="fragment-1"&gt;

                &lt;p&gt;First tab is active by default:&lt;/p&gt;
                &lt;pre&gt;&lt;code&gt;$('#example &gt; ul').tabs();&lt;/code&gt;&lt;/pre&gt;

            &lt;/div&gt;

            &lt;div id="fragment-2"&gt;
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            &lt;/div&gt;
            &lt;div id="fragment-3"&gt;
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            &lt;/div&gt;
        &lt;/div&gt;</code>
</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>Builds a tabs interface with second tab selected on initialization.</p>
<pre>
<code class="javascript">$('.selector').tabs(2);</code>
</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>Builds a tabs interface with some additional options.</p>
<pre>
<code class="javascript">$('.selector').tabs({ cache: true });</code>
</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>Builds a tabs interface with second tab selected on initialization and some additional options.</p>
<pre>
<code class="javascript">$('.selector').tabs(2, { cache: true });</code>
</pre>
</div>
</div>
</li>
<li id="link-tabsAdd-urltitleposition">
<span class="fn"><a class="name" href="#link-tabsAdd-urltitleposition">tabsAdd</a>( <span class="arg-type tooltip" title="A string of characters.">String</span> <span class="arg-name tooltip" title="A fragment identifier (hash) or full URL (same domain) for the new tab. The identifier may refer to an already existing element, otherwise a new div is going to be created.">url</span>, <span class="arg-type tooltip" title="A string of characters.">String</span> <span class="arg-name tooltip" title="The title of the new tab.">title</span>, <span class="arg-type tooltip" title="A valid numeric.">Number</span> <span class="arg-name tooltip" title="The position where the new tab is created (no zero-based index). By default a new tab is appended as last tab.">position</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">The method that you use to add a new tab to a tabs interface.<br>The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element.</div>
<div class="example">
<h3>Example:</h3>
<p>Adds a new inline tab at the end.</p>
<pre>
<code class="javascript">$(".selector").tabsAdd('#new-tab', 'New Tab');</code>
</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>Inserts a new inline tab at the second position.</p>
<pre>
<code class="javascript">$(".selector").tabsAdd('#new-tab', 'New Tab', 2);</code>
</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>Adds a new remote tab at the end.</p>
<pre>
<code class="javascript">$(".selector").tabsAdd('/path/to/foo.php', 'New Tab');</code>
</pre>
</div>
</div>
</li>
<li id="link-tabsClick-position">
<span class="fn"><a class="name" href="#link-tabsClick-position">tabsClick</a>( <span class="arg-type tooltip" title="A valid numeric.">Number</span> <span class="arg-name tooltip" title="The position of the tab that is going to be clicked (no zero-based index).">position</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">The method that you use to simulate a click on tab in a tabs interface.<br>The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element.</div>
</div>
</li>
<li id="link-tabsDisable-position">
<span class="fn"><a class="name" href="#link-tabsDisable-position">tabsDisable</a>( <span class="arg-type tooltip" title="A valid numeric.">Number</span> <span class="arg-name tooltip" title="The position of the tab that is going to be disabled (no zero-based index).">position</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">The method that you use to disable a tab in a tabs interface.<br>The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element.</div>
</div>
</li>
<li id="link-tabsEnable-position">
<span class="fn"><a class="name" href="#link-tabsEnable-position">tabsEnable</a>( <span class="arg-type tooltip" title="A valid numeric.">Number</span> <span class="arg-name tooltip" title="The position of the tab that is going to be enabled (no zero-based index).">position</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">The method that you use to enable a tab in a tabs interface.<br>The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element.</div>
</div>
</li>
<li id="link-tabsHref-positionurl">
<span class="fn"><a class="name" href="#link-tabsHref-positionurl">tabsHref</a>( <span class="arg-type tooltip" title="A valid numeric.">Number</span> <span class="arg-name tooltip" title="The position of the tab which remote URL, e.g. href, is going to be updated (no zero-based index).">position</span>, <span class="arg-type tooltip" title="A string of characters.">String</span> <span class="arg-name tooltip" title="A URL the content of the tab is loaded from.">url</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">The method that you use to set a new URL for a remote (Ajax) tab in a tabs interface.<br>The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element.</div>
</div>
</li>
<li id="link-tabsLoad-positionurl">
<span class="fn"><a class="name" href="#link-tabsLoad-positionurl">tabsLoad</a>( <span class="arg-type tooltip" title="A valid numeric.">Number</span> <span class="arg-name tooltip" title="The position of the tab that is going to be reloaded (no zero-based index).">position</span>, <span class="arg-type tooltip" title="A string of characters.">String</span> <span class="arg-name tooltip" title="A URL the content of the tab is loaded from. The given URL is also set for subsequent loads, until a new URL is specified that is.">url</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">The method that you use to reload a remote (Ajax) tab in a tabs interface.<br>The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element.</div>
</div>
</li>
<li id="link-tabsRemove-position">
<span class="fn"><a class="name" href="#link-tabsRemove-position">tabsRemove</a>( <span class="arg-type tooltip" title="A valid numeric.">Number</span> <span class="arg-name tooltip" title="The position of the tab that is going to be removed (no zero-based index).">position</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">The method that you use to remove a tab from a tabs interface.<br>The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element.</div>
</div>
</li>
<li id="link-tabsRotate-milliseconds">
<span class="fn"><a class="name" href="#link-tabsRotate-milliseconds">tabsRotate</a>( <span class="arg-type tooltip" title="A valid numeric.">Number</span> <span class="arg-name tooltip" title="Amount of time in milliseconds until the next tab in the cycle gets activated.">milliseconds</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span>
<div class="more">
<div class="desc">A method that you use to set up an automatic rotation through tabs of a tab pane.<br>The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element. Rotation stops if a tab is clicked on. To stop the rotation programmatically call this method without any or some falsy argument, like 0 or null.</div>
<div class="example">
<h3>Example:</h3>
<p>Start rotation with an interval of 5 seconds.</p>
<pre>
<code class="javascript">$(".selector").tabsRotate(5000);</code>
</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>Stop rotation.</p>
<pre>
<code class="javascript">$(".selector").tabsRotate(null);</code>
</pre>
</div>
</div>
</li>
<li id="link-tabsSelected-">
<span class="fn"><a class="name" href="#link-tabsSelected-">tabsSelected</a>(  ) returns <span class="type"><span class="tooltip" title="A valid numeric.">Number</span></span></span>
<div class="more">
<div class="desc">Retrieve the position of the currently selected tab of the first matched tabs interface (no zero-based index).<br>The selector must be the same as the one that was used for tabs initialisation, e.g. must match or can be the ul/ol element. Returns -1 if no tab is currently selected.</div>
</div>
</li>
</ul>
</div>
</body>
</html>
